如何获取Firestore文档内的doses数组并解决map is not a function报错

错误原因 #

1. 在users.map遍历的回调函数内部，错误使用外层的users数组获取doses属性。users是存储所有用户数据的数组，本身不存在doses字段，doses属于遍历到的单个user对象的属性，undefined调用map方法自然会抛出is not a function的错误。
2. 缺少对doses字段的类型校验，Firestore中该字段为空或者类型异常时也会触发同类报错。
3. JSX结构不符合语法规范，单条map回调返回了多个根节点，且未添加遍历项的key属性。

修正后代码 #

遍历代码调整（原有数据获取逻辑不变）

{users && users.map((user) => (
  <>
    <li>{user.email}</li>
    {/* 从当前遍历的单个user对象取doses，先校验是数组再遍历 */}
    {Array.isArray(user.doses) && user.doses.map((doseItem, index) => (
      <li key={index}>{doseItem.selectedVaccine}</li>
    ))}
  </>
))}

可选优化方案 #

你当前查询的是单个用户文档，无需将数据包裹为数组存储，可直接存储用户对象简化逻辑：

数据获取代码调整

useEffect(() => {
  const unsubscribe = firestore
    .collection("users")
    .doc(scanResult)
    .onSnapshot((snapshot) => {
      setUser(snapshot.data());
    });

  return () => unsubscribe();
}, []);

对应遍历代码

{user && (
  <>
    <li>{user.email}</li>
    {Array.isArray(user.doses) && user.doses.map((doseItem, index) => (
      <li key={index}>{doseItem.selectedVaccine}</li>
    ))}
  </>
)}

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