如何检查Firestore文档中是否存在doses对象以避免取值报错

解决方案 #

你可以通过以下几种方式避免空值报错，可根据你的项目环境选择：

方法1：渲染时使用可选链（推荐，ES2020+支持）

直接在访问嵌套属性前加?.操作符，当doses为undefined时会直接返回undefined，不会抛出错误，还可以配合空值合并操作符??设置兜底展示内容：

{users && users.map((user) => (
  // 这里用圆括号做隐式返回，也可以用return显式返回
  user.doses?.selectedVaccine ?? '暂无疫苗信息'
))}

如果你的项目不支持ES2020语法，可以用传统的逻辑与判断：

{users && users.map((user) => (
  user.doses && user.doses.selectedVaccine
))}

方法2：获取数据时统一兜底

在拿到Firestore快照数据时就给doses设置默认空对象，后续所有用到doses的地方都不需要再做判断：

useEffect(() => {
  const unsubscribe = firestore
    .collection("users")
    .doc(uid)
    .onSnapshot((snapshot) => {
      const data = snapshot.data() || {}
      const arr = [];
      arr.push({
        ...data,
        // 给doses设置默认空对象
        doses: data.doses ?? {}
      });
      setUsers(arr);
    });
  return () => {
    unsubscribe();
  };
}, []);

之后渲染时直接访问即可，不会报错：

{users && users.map((user) => user.doses.selectedVaccine)}

注意

你原来的map回调内使用了大括号但没有写return，属于语法问题，即使解决了空值错误也无法正常渲染内容，上述示例已经修正了这个问题。

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