React项目调用Firestore的getDoc方法获取数据时报错求助

以下是针对你遇到的问题的具体修复方案：

1. 修正DocumentSnapshot的方法调用 #

你代码里的两处错误：

• docSnap.data是方法，不是属性，需要调用docSnap.data()才能获取文档数据
• docSnap.exists同样是方法，需用docSnap.exists()判断文档是否存在

这两个错误会导致快照对象的内部状态读取异常，触发目标报错。

2. 确保userEmail的有效性与依赖项正确 #

你的useEffect依赖数组为空，组件挂载时userEmail可能还未赋值（比如从Auth获取的用户邮箱还未返回），导致创建了无效的文档引用，进而让getDoc调用失败。

修改后的完整代码：

useEffect(() => {
    // 先判断userEmail是否存在，避免发起无效请求
    if (!userEmail) return;
    
    const getUserData = async () => {
        try {
            const userRef = doc(db, "Users", userEmail);
            const docSnap = await getDoc(userRef);
            if (docSnap.exists()) {
                setUserDetails(docSnap.data());
            } else {
                console.log("对应用户的文档不存在");
            }
        } catch (error) {
            console.log(error.message);
        }
    };
    getUserData();
}, [userEmail]); // 将userEmail加入依赖数组，值变化时重新请求

3. 验证Firestore实例db的初始化 #

确保你的Firestore初始化代码正确，示例如下：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  // 你的Firebase项目配置信息
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app); // 确保正确导出该db实例
export default db;

如果db实例未正确初始化，会导致创建的文档引用无效，触发目标报错。

内容的提问来源于stack exchange，提问作者Siva tharun Thuraka