使用 firestore onSnapshot 和 nextjs 进行实时更新

Question

我想使用基于 cookies 会话 ID 的 onSnapshot 从 firestore 获取用户数据，并在网络上显示有关该用户的信息并进行实时更改。但是，如果我尝试在 useEffect 中使用此快照数据，则会抛出错误，因为

useEffect()

仅在客户端组件中可用，而

cookies().get()

使其成为服务器组件。 有没有办法获取服务器端 cookie，因为我只有 http cookie 用于身份验证，然后使用

useEffect()

和

useState()

来获取实时数据

我阅读了所有有关使用 onSnapshot 获取数据和实时更新的文档。我尝试使用 nextjs 的缓存，但我不知道如何使其与 firestore onSnapshot 一起使用

Answer 1

嗨，Tecco，您应该使用库来使用 firebase，您尝试过吗？

useEffect(() => {
    const q = query(collection(firestore, 'your-collection'));
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      const docs = querySnapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      setData(docs);
    });

    // Limpieza al desmontar el componente
    return () => unsubscribe();
  }, []);