React.js中如何基于登录用户uid查询Firestore的documents集合数据

问题根因 #

1. 执行查询前未判断user是否加载完成：你将auth状态监听和Firestore查询放在同一个useEffect中，onAuthStateChanged是异步回调，首次执行useEffect时user还是初始的undefined，直接读取user.uid会触发报错，逻辑自然无法正常执行。
2. where查询写法错误：你使用的是Firebase v9模块化SDK，collection().where()是旧版本v8的链式调用写法，v9中必须通过query()函数组合查询条件，你导入了query和where但没有正确使用，所以筛选条件没有生效。

实现方案 #

拆分useEffect逻辑，新增非空判断，修正查询写法即可，修改后的完整代码如下：

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 }) => {
    // 明确初始值为null，语义更清晰
    const [user, setUser] = useState(null)
    const [documents, setDocuments] = useState([])

    // 第一个useEffect：专门监听用户登录状态
    useEffect(() => {
        const unSubscribeAuth = onAuthStateChanged(auth, currentUser => {
            setUser(currentUser)
        })
        // 清理auth监听
        return () => unSubscribeAuth()
    }, [])

    // 第二个useEffect：用户状态变化时执行查询，加非空判断
    useEffect(() => {
        // 用户未加载完成直接返回，不执行后续逻辑
        if (!user) return

        // 修正v9 SDK的查询写法，用query组合条件
        const documentQuery = query(
            collection(db, 'documents'),
            where('uid', '==', user.uid)
        )

        const unSubscribeSnapshot = onSnapshot(documentQuery, (snapshot) => {
            let results = []
            snapshot.docs.forEach(doc => {
                results.push({...doc.data(), id: doc.id})
            })
            setDocuments(results)
        })

        // 清理快照监听
        return () => unSubscribeSnapshot()
    }, [user])

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

export default DocumentList

核心修改说明 #

• 拆分了两个独立的useEffect，分别处理auth状态监听和数据查询逻辑，职责更清晰
• 数据查询的useEffect开头加了非空判断，只有user存在时才会执行后续查询，解决了user为null时提前执行的问题
• 按照Firebase v9的规范重构了查询写法，用query函数组合集合引用和where筛选条件，解决了where不生效的问题
• 补充了auth监听的清理逻辑，避免内存泄漏

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