如何在React页面中从Firestore获取多个文档？解决hooks调用问题

核心问题分析 #

你碰到的两个问题本质是React Hooks规则和TypeScript类型校验的冲突：

• React要求Hooks必须在组件顶层按固定顺序调用，不能放在if这类条件语句里，否则会触发Hooks调用顺序变化的错误。
• 直接用userValue.companyId会触发TypeScript报错，因为userValue可能还未加载完成或不存在。

正确实现方案 #

利用react-firebase-hooks支持传入undefined作为文档引用的特性，把所有Hooks调用放在组件顶层，通过条件判断生成有效的文档引用即可：

const [user] = useAuthState(auth);

// 1. 生成用户文档引用：仅当user存在时才有效
const userDocRef = user ? doc(db, "users", user.uid) : undefined;
const [userValue, userLoading, userError, userSnapshot] = useDocumentData(userDocRef, {
  snapshotListenOptions: {
    includeMetadataChanges: true,
  },
});

// 2. 生成公司文档引用：仅当userValue和companyId存在时才有效
const companyDocRef = userValue?.companyId ? doc(db, "companies", userValue.companyId) : undefined;
const [companyValue, companyLoading, companyError, companySnapshot] = useDocumentData(companyDocRef);

代码说明 #

• 固定Hooks调用顺序：所有useDocumentData都在组件顶层调用，无论用户是否登录，都不会触发React的Hooks顺序错误。
• TypeScript类型安全：用可选链userValue?.companyId确保只有当userValue存在且包含companyId时，才生成公司文档引用，避免undefined报错。
• 自动跳过无效请求：当文档引用为undefined时，useDocumentData不会发起Firebase请求，内部会保持loading: false、value: undefined的状态，无需额外处理。

后续状态处理 #

你可以根据加载状态做交互反馈：

if (userLoading || companyLoading) {
  return <div>加载中...</div>;
}

if (userError || companyError) {
  return <div>加载失败</div>;
}

// 此时可通过可选链安全访问数据
return (
  <div>
    <p>用户名：{userValue?.name}</p>
    <p>公司名称：{companyValue?.name}</p>
  </div>
);

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