React项目中访问Firestore文档字段时刷新页面报错的问题求助

兄弟，这个问题我太熟了！咱们来一步步拆解清楚：

问题根源 #

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

• 组件初始化时，manager的初始状态是空数组[]
• 组件第一次渲染时，useEffect里的Firestore异步请求还没完成，这时候你直接访问manager[0].rating，相当于在undefined上读取属性，自然会抛出报错
• 而你保存文件时的热重载不会报错，是因为浏览器缓存了之前请求到的数据，manager已经有值了，组件渲染时能正常访问字段

解决方案 #

给你几个简单好用的解决办法，选一个你习惯的就行：

1. 使用可选链操作符（推荐）

直接在访问字段时加上?.，当manager[0]不存在时会自动返回undefined，不会触发报错：

<div>
  {console.log(manager[0]?.rating)}
</div>

2. 条件渲染，确保有数据再访问

先判断manager是否已加载到数据，再执行后续操作：

<div>
  {manager.length > 0 && console.log(manager[0].rating)}
</div>

如果要展示页面内容，还可以扩展成带加载提示的版本：

<div>
  {manager.length === 0 ? (
    <p>加载中...</p>
  ) : (
    <p>经理评分：{manager[0].rating}</p>
  )}
</div>

3. 初始化时设置默认结构

你也可以把manager的初始状态设置成包含空对象的数组，避免manager[0]直接是undefined：

const [manager, setManager] = useState([{}]);

不过这个方法灵活性不如前两种，更推荐前两个方案。

验证效果 #

修改后刷新页面，组件会优雅处理“数据未加载完成”的状态，等Firestore请求返回数据、manager更新后，组件会重新渲染，就能正常读取并显示评分啦！

备注：内容来源于stack exchange，提问作者Filipe Nogueira