初始加载时useEffect无法获取Firebase数据，仅快速刷新后显示

下方@Chris的回答解决了我的问题。我安装了React Firebase Hooks包，并按以下方式配置代码，现在一切运行正常！:)

const [value] = useCollection(collection(db, `${sessionUserId}`), {
    snapshotListenOptions: { includeMetadataChanges: true },
  })
  useEffect(() => {
    if (value) {
      const allData = JSON.parse(
        JSON.stringify(
          value?.docs.map((doc) => ({
            id: doc.id as string,
            resultData: doc.data() as DocumentData,
          }))
        )
      )
      setAllLogs(allData)
    }
  }, [value])

我的项目技术栈 #

NextAuthjs、Firebase、Recoiljs

我使用useRecoilState钩子存储用户创建的日志：

const [allLogs, setAllLogs] = useRecoilState(modalAllLogs)

modalAllLogs的定义如下：

export const modalAllLogs = atom<Array<DocumentData>>({
  key: 'allLogs',
  default: [],
})

问题描述 #

我通过useEffect钩子从数据库获取用户数据并调用setAllLogs更新状态（注：状态仅在此处更新）：

useEffect(() => {
    const docQuery = query(
      collection(db, `${sessionUserId}`),
      orderBy('timestamp', 'desc')
    )
    const unsubscribe = onSnapshot(
      docQuery,
      (snapshot: QuerySnapshot<DocumentData>) => {
        const data = JSON.parse(
          JSON.stringify(
            snapshot.docs.map((doc: QueryDocumentSnapshot<DocumentData>) => ({
              id: doc.id as string,
              resultData: doc.data() as DocumentData,
            }))
          )
        )
        setAllLogs(data)
      }
    )
    return unsubscribe
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [db])

实际现象：初始渲染时，allLogs返回空数组且始终为空；只有修改该文件并保存，触发NextJS的快速刷新后，allLogs才会正确显示数据。打印snapshot发现初始渲染时它也是空的。

通过输入添加数据时，Firebase能正确存储数据，仅存在初始加载时数据无法加载的问题。

我不确定问题所在，可能是RecoilState的使用方式有误？

我尝试过多种方案：将依赖改为allLogs（导致无限循环）、使用getDocs()替代onSnapshot()等，但均无效。

内容的提问来源于stack exchange，提问作者Ariel