NextJS+React+Firestore首次加载报错：无法读取undefined的url属性

问题原因 #

你遇到的是异步数据加载的时序问题：

• useDocumentData 是异步获取Firestore文档数据的Hook，组件首次渲染时，Firestore的请求还未完成，floorDoc 此时是 undefined（或null），直接访问 floorDoc.url 自然会抛出Cannot read properties of undefined的错误。
• 当你替换成普通字符串再换回时，组件已经完成了一次渲染周期，此时Firestore的异步请求已经结束，floorDoc 已经拿到了数据库中的数据，所以能正常读取url。

解决方案 #

1. 处理加载状态，条件渲染 #

利用useDocumentData返回的加载状态（第二个返回值），在数据加载完成前避免渲染依赖数据的组件：

export default function FloorComponent({ postRef }) {
  const floorRef = postRef.collection('assets').doc('floor');
  // 解构出数据、加载状态和错误状态
  const [floorDoc, loading, error] = useDocumentData(floorRef);

  const [ref] = usePlane(() => ({
    rotation: [-Math.PI / 2, 0, 0],
  }));
  
  // 仅当floorDoc存在时加载纹理
  const texture = floorDoc ? useTexture(floorDoc.url) : null;

  // 加载中时返回空或加载提示
  if (loading) return null;
  // 处理错误情况
  if (error) return <div>加载地板数据失败：{error.message}</div>;

  return (
    <mesh rotation={[-Math.PI / 2, 0, 0]}>
      <planeBufferGeometry attach="geometry" args={[100, 100]} />
      <meshBasicMaterial map={texture} />
    </mesh>
  );
}

2. 使用可选链操作符兜底 #

如果你不想在加载时隐藏组件，可以用可选链?.避免报错，同时给useTexture提供默认值（比如一个占位纹理的URL）：

// 替换纹理加载的代码
const texture = useTexture(floorDoc?.url || 'https://your-default-texture-url.com/image.png');

注意：如果useTexture不接受undefined，必须提供一个有效的默认URL，否则还是会报错。

关键注意点 #

• 所有依赖异步数据的操作都必须等待数据加载完成后再执行，这是React组件开发的基本常识。
• 不要忽略错误状态处理，当Firestore请求失败时（比如权限问题、网络错误），error会有值，需要给用户反馈。

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