ReactJS+Firebase：字段未定义时如何创建初始值为0的字段？

开发者阿泽

2026-8-8

问题解决与优化方案

1. 修复控制台报错

报错Uncaught TypeError: Cannot read properties of undefined (reading 'Field_1')的核心原因：当item.FieldSet不存在时，item?.FieldSet返回undefined，继续访问.Field_1会触发读取未定义属性的错误；同时你的useEffect缺少依赖数组，会导致无限重复执行。

修改后的useEffect代码：

useEffect(() => {
  if (field_1 === '' && field_2 === '' && field_3 === '' && field_4 === '' && field_5 === '') {
    listItemUser?.map(item => {
      // 给FieldSet加上可选链，同时用空值合并运算符设置默认值0
      setField_1(item?.FieldSet?.Field_1 ?? 0);
      setField_2(item?.FieldSet?.Field_2 ?? 0);
      setField_3(item?.FieldSet?.Field_3 ?? 0);
      setField_4(item?.FieldSet?.Field_4 ?? 0);
      setField_5(item?.FieldSet?.Field_5 ?? 0);
    });
  }
}, [listItemUser, field_1, field_2, field_3, field_4, field_5]); // 添加依赖数组，避免无限循环

2. 自动创建FieldSet并设置初始值

要在FieldSet不存在时自动创建它，同时给空字段设置初始值0，需要在更新Firestore前先处理字段值，确保空值或未定义的字段被替换为0：

修改后的onSubmit代码：

firebase
  .firestore()
  .collection("user")
  .doc(user1)
  .update({
    FieldSet: {
      // 空值合并运算符仅在字段为null/undefined时设为0；若要把空字符串也替换成0，改用||
      Field_1: field_1 ?? 0,
      Field_2: field_2 ?? 0,
      Field_3: field_3 ?? 0,
      Field_4: field_4 ?? 0,
      Field_5: field_5 ?? 0,
      id: id // 若id需要默认值，可同样处理：id ?? 'default-id'
    }
  }, {
    merge: true // 保持该参数，确保不会覆盖文档中其他已有字段
  });