如何在组件挂载后，使用仅能获取的数据初始化Hook？

你遇到的核心问题是Next.js路由参数在初始渲染时可能为undefined，而useCollection作为React Hook必须在组件顶层调用，不能放到useEffect里。下面是具体的解决思路和修改后的代码：

核心思路 #

react-firebase-hooks的useCollection支持传入null，此时会暂停数据监听。我们可以通过判断id是否有效，决定传入有效的Firestore集合引用还是null，这样既符合Hook的调用规则，又避免了id未定义时的错误。

修改后的代码 #

import { useRouter } from "next/router";

import { useCollection } from "react-firebase-hooks/firestore";
import { db } from "@/firebase/clientApp";
import { collection } from "firebase/firestore";

export default function Test() {
  const router = useRouter();
  const { id } = router.query;
  // 仅当id是有效字符串时，才传入集合引用，否则传null
  const isValidId = typeof id === "string";
  const [data, dataLoading, dataError] = useCollection(
    isValidId ? collection(db, "drafts", id) : null,
    {}
  );

  // 处理不同状态
  if (dataLoading) return <div>加载中...</div>;
  if (dataError) return <div>加载失败：{dataError.message}</div>;
  if (!isValidId) return <div>无效的文档ID</div>;

  return (
    <div>
      <h2>文档列表</h2>
      {data?.docs.map((doc) => (
        <div key={doc.id}>{JSON.stringify(doc.data())}</div>
      ))}
    </div>
  );
}

关键细节说明 #

1. 类型安全处理：通过typeof id === "string"确保id是有效字符串，解决TypeScript的类型报错问题，比直接用类型断言更严谨。
2. Hook调用规则：始终在组件顶层调用useCollection，通过条件传参控制是否发起请求，符合React Hook的使用规范。
3. 状态反馈：增加加载、错误、无效ID的状态提示，提升用户体验。

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