在 React.js 中根据 uid 检索 firebase 集合答案

【问题标题】：Retrieve firebase collection based on uid in React.js在 React.js 中根据 uid 检索 firebase 集合
【发布时间】：2021-11-14 20:55:56
【问题描述】：

我一定已经阅读了大约 50-100 篇关于此主题的文章。还是我解决不了，也看不懂。

在我的 Firestore 数据库中，我有一个名为 “documents” 的集合。每个文档都有自己的 "uid"-字段。我正在尝试根据登录用户的 uid 检索集合。

我得出的结论是，在“取消订阅”功能运行之前，我的应用程序没有获得用户。可能是因为当 useEffect 首次运行时，我的用户是 null （最初是）。但是我应该怎么做才能使函数等待用户变为空值？如果这是我应该使用的逻辑。

PS。此外，似乎没有使用 where 函数。怎么会？

import { useEffect, useState } from 'react'
import { onAuthStateChanged } from 'firebase/auth'
import { db, auth } from '../firebase/config'
import { collection, onSnapshot, query, where } from 'firebase/firestore'

import AddDocument from './AddDocument'
import Document from './Document'

const DocumentList = ({ title }) => {

    const [user, setUser] = useState()
    const [documents, setDocuments] = useState([])

    console.log(user)

    useEffect(() => {

      onAuthStateChanged(auth, currentUser => {
        setUser(currentUser)
      })

      const documentCollection = collection(db, 'documents').where('uid', '==', user.uid)

      const unSubscribe = onSnapshot(documentCollection, (snapshot) => {
        let results = []
        snapshot.docs.forEach(document => {
            results.push({...document.data(), id: document.id})
        })
        setDocuments(results)
      })

      return () => unSubscribe()

    }, [user])

    return (
        <div className="mt-16">
            <h5 className="text-gray-500">{title}</h5>
            <div className="grid grid-cols-8 mt-4">
                {documents && documents.map((props) => (
                    <Document key={props.id} {...props} />
                ))}
                <AddDocument />
            </div>
        </div>
    )
}

export default DocumentList

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

第一步是所有需要当前用户的代码都应该在onAuthStateChanged 回调中，否则user 将没有正确的值。所以：

onAuthStateChanged(auth, currentUser => {
  setUser(currentUser)
  const documentCollection = collection(db, 'documents').where('uid', '==', currentUser.uid)
                                                                          //  ?
  const unSubscribe = onSnapshot(documentCollection, (snapshot) => {
    let results = []
    snapshot.docs.forEach(document => {
      results.push({...document.data(), id: document.id})
    })
    setDocuments(results)
  })
})
//return () => unSubscribe() // ? This will also have to change

【讨论】：