使用React Firebase Hooks获取用户文档时uid读取报错解决方案

问题现象 #

为Cloud Firestore的documents集合编写用户文档查询Hook时，抛出如下错误：

TypeError: Cannot read properties of null (reading 'uid')

问题根因 #

代码执行到useDocument调用逻辑时，useAuthState还未完成用户身份拉取，此时user值为null，直接读取user.uid就会触发空指针报错。

所用技术栈 #

• Next.js (TypeScript)
• Firebase v9
• React Firebase Hooks v4

原始问题代码 #

const [user, loading, error] = useAuthState(auth);

const [documents, documentsLoading, documentsError] = useDocument(
  doc(db, "documents", user.uid)
);

正确处理方案 #

核心思路是遵守React Hooks调用规则，不要通过条件返回提前阻断Hook执行，利用React Firebase Hooks原生支持的空引用跳过查询特性：当给useDocument传入null作为文档引用参数时，Hook会自动暂停查询，不会发起无效请求，也不会触发空值读取错误。
修正后代码如下：

const [user, authLoading, authError] = useAuthState(auth);

// 身份未就绪时传null，暂停文档查询；身份就绪后传入正确的文档引用
const userDocRef = user ? doc(db, "documents", user.uid) : null;
const [documents, documentsLoading, documentsError] = useDocument(userDocRef);

// 可合并两类加载状态，统一控制页面加载UI
const pageLoading = authLoading || documentsLoading;

注意事项 #

• 禁止为了等待身份加载，在两个Hook中间写if(loading) return <Loading/>这类提前返回逻辑，会违反React Hooks顺序调用规则，引发更隐蔽的报错
• 不需要额外封装等待逻辑，Hook本身会在引用从null变为有效文档路径时自动触发查询
• 可以结合authError和documentsError统一做异常捕获和提示

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