自定义Hook useDocument获取Firebase Firestore数据返回[object Object]且无法访问属性问题排查

让我们逐个解决你遇到的两个问题：

问题1：console.log显示[object Object]而非实际对象内容 #

这是JavaScript字符串拼接的默认行为——当你用+连接字符串和对象时，对象会被自动转换为默认的字符串表示[object Object]。

解决方法：

• 直接将对象作为单独参数传给console.log，控制台会允许你展开查看对象细节：

  console.log("documents 2:", document);
  

• 如果你需要把对象内容转为字符串打印，用JSON.stringify（这也是你已经尝试过的有效方式）：

  console.log("documents 2:", JSON.stringify(document));
  

问题2：访问document.name抛出Cannot read properties of null错误 #

你的Hook初始状态把document设为了null，而Firestore的onSnapshot是异步操作——组件会先以初始状态null渲染，之后才会获取到Firestore的数据并更新document状态。在初始渲染阶段访问document.name自然会报错，因为null没有name属性。

解决方法：
你有几种可靠的处理方式：

方式1：使用可选链操作符（推荐） #

可选链?.会在左侧值为null/undefined时停止访问，避免报错：

console.log(document?.name);

方式2：添加加载状态与条件判断 #

在组件中先判断document是否存在，再访问属性，同时可以给用户显示加载提示：

const Home = () => {
  const { document, error } = useDocument("test", "D68ogPwGLCeaOfoRZIBe");

  if (error) return <div className="error">{error}</div>;
  // 数据未加载时显示加载状态
  if (!document) return <div>Loading document...</div>;

  // 确认document存在后再访问属性
  console.log(document.name);

  return <div>Hello, {document.name}</div>;
};

方式3：用useEffect监听document变化 #

只有当document状态更新为有效对象时，才执行打印操作：

useEffect(() => {
  if (document) {
    console.log("Document name:", document.name);
  }
}, [document]); // 依赖document，仅当它变化时触发

你的useDocument Hook逻辑本身是没问题的——它正确地将Firestore文档数据和ID合并为一个对象返回，只是组件层面需要处理异步加载的初始状态和对象打印的小细节。

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