React从Firestore取用户数据刷新时报Cannot read property '1' of undefined如何解决

报错原因说明 #

这个报错和currentUser有间接关联，核心触发原因如下：

• 页面刷新后Redux的currentUser是异步初始化的（比如从本地存储、鉴权接口拉取），首次渲染时currentUser大概率为空，你的useEffect仅在currentUser存在时才会触发Firestore数据请求，此时users还保持初始空数组的状态
• 你在访问数据时只给.items加了可选链，前面的users[0][1]没有做空值保护，首次渲染时users[0]为undefined，访问undefined[1]就会抛出该错误

修复方案 #

1. 给多层级访问全量加空值保护

把获取userItems1的代码改成如下形式，用可选链覆盖所有层级访问，同时用空值合并运算符兜底为空对象，避免后续Object.entries报错：

const userItems1 = users[0]?.[1]?.items ?? {};

2. 加加载状态判断，避免未就绪时渲染

在渲染相关逻辑前加加载判断，数据未就绪时展示加载占位：

// 放在遍历、渲染逻辑的最前面
if (!currentUser || !users.length || !users[0]?.[1]?.items) {
  return <div>加载中...</div>
}

// 后面再执行你的遍历和渲染逻辑
let ar = [];
for (const [key, value] of Object.entries(userItems1)) {
  ar.push(key, " ");
}

3. 可选优化：简化数据存储逻辑

你当前查询的是单个用户的文档，没有必要把返回结果存在数组里，直接存对象更简洁，也能避免访问数组第0项的冗余逻辑：

// 把users改成存单个对象
const [user, setUser] = useState(null)
useEffect(() => {
  if (currentUser) {
    const unsubscribe = db
      .collection("users")
      .doc(uid)
      .onSnapshot((snapshot) => {
        setUser(snapshot.data());
      });
    return () => unsubscribe();
  }
}, [currentUser])

// 后续访问直接取对象属性
const userItems1 = user?.[1]?.items ?? {}

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