React项目调用Firebase getDoc读取Firestore文档数据无返回问题

问题根因 #

渲染崩溃、自定义字段无法读取的问题来自4个核心编码错误：

• 文档ID传参错误：之前代码将整个currentUser对象转字符串作为Firestore文档ID，实际users集合的文档ID是用户的UID字段，需要传入fireUser.uid
• 异步逻辑位置错误：Firestore的getDoc是异步API，直接在组件渲染函数顶层同步调用，要么拿不到返回值，要么触发无限重渲染导致页面卡死；直接在组件顶层写async/await会打断React渲染流，直接造成页面渲染失败
• 字段取值来源错误：phoneNo、title是存储在Firestore集合里的自定义字段，不属于Firebase Auth模块返回的user对象原生属性，直接从user对象上取值永远无法拿到目标值
• 鉴权状态未做兜底：页面初始化时Firebase Auth还没完成鉴权校验，直接取auth.currentUser大概率拿到null，后续调用属性会触发空指针报错

Firebase users集合结构截图

正确实现代码 #

需要借助React的useState管理异步拉取到的数据、useEffect包裹副作用逻辑，同时监听Auth鉴权状态，等用户信息加载完成后再查询Firestore数据，完整可运行代码如下：

import { useState, useEffect } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import { doc, getDoc } from 'firebase/firestore';
// 替换为项目中已初始化完成的db实例导入路径
import { db } from './your-firebase-config-path';
import UserForm from './UserForm';

export default function UserPage() {
  const [authUser, setAuthUser] = useState(null);
  const [userExtraData, setUserExtraData] = useState({
    phoneNo: '',
    title: ''
  });
  const [loading, setLoading] = useState(true);
  const auth = getAuth();

  useEffect(() => {
    // 监听Auth鉴权状态，规避currentUser初始为null的问题
    const unSubscribeAuth = onAuthStateChanged(auth, async (user) => {
      if (!user) {
        setLoading(false);
        // 可在此处添加未登录跳转逻辑，例如跳转至登录页
        return;
      }
      setAuthUser(user);
      try {
        // 正确构造文档引用：集合名users，文档ID对应用户uid
        const userDocRef = doc(db, 'users', user.uid);
        const docSnap = await getDoc(userDocRef);
        if (docSnap.exists()) {
          // 提取文档中的自定义字段存入state
          const data = docSnap.data();
          setUserExtraData({
            phoneNo: data.phoneNo || '',
            title: data.title || ''
          });
        }
      } catch (err) {
        console.error('读取用户数据失败:', err);
      } finally {
        setLoading(false);
      }
    });

    // 组件卸载时取消鉴权监听，避免内存泄漏
    return () => unSubscribeAuth();
  }, [auth]);

  if (loading) return <section>加载中...</section>;
  if (!authUser) return <section>请先登录</section>;

  return (
    <section>
      <div>
        <h1>My Details</h1>
        <ul>
          <li>
            <label className="col">
              <div className="row">
                <p className="bold" >DisplayName: </p>
                <p>{authUser.displayName}</p>
              </div>
            </label>
            <label>
              <div className="row">
                <p className="bold" >UserID: </p>
                <p>{authUser.uid}</p>
              </div>
            </label>
            <label>
              <div className="row">
                <p className="bold" >Email: </p>
                <p>{authUser.email}</p>
              </div>
            </label>
            <label>
              <div className="row">
                <p className="bold" >Phone Number: </p>
                <p>{userExtraData.phoneNo}</p>
                {/* <button>edit</button> */}
              </div>
            </label>
            <label>
              <div className="row">
                <p className="bold" >Title: </p>
                <p>{userExtraData.title}</p>
                {/* <button>edit</button> */}
              </div>
            </label>
          </li>
        </ul>
        <UserForm />
      </div>
    </section>
  );
}

关键注意点 #

• 所有异步数据请求、Firebase SDK相关的副作用逻辑，必须放在useEffect里执行，禁止直接写在组件函数顶层
• 不要直接使用auth.currentUser做初始渲染判断，必须用onAuthStateChanged监听鉴权状态，等SDK完成用户身份校验后再执行后续逻辑
• 调用getDoc拿到的是文档快照对象，必须先调用.exists()判断文档存在，再调用.data()获取字段内容，避免文档不存在时触发方法报错
• 异步拉取到的Firestore数据要存在React state中，通过state更新触发组件重渲染，才能把数据正常展示到页面上

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