React结合Firebase调用DocumentReference.set()报不支持undefined字段错误

异常1：文档路径显示av_deliveries/[object Object]根因定位 #

这个问题本质是自动生成文档ID的实现逻辑错误：

• 触发原因：调用.doc()方法时传入了一个JS对象（比如错误传入了整个collection引用、自定义嵌套对象），由于JS对象的默认字符串化结果就是[object Object]，最终被拼接成了异常的文档路径
• 正确实现自动ID的逻辑：如果要让Firebase生成随机文档ID，调用.doc()时不要传任何参数，返回的DocumentReference本身已经内置了生成好的随机ID，不需要额外手动传值生成
• 错误代码示例：

  // 错误逻辑：把collection引用当参数传给doc()
  const deliveryRef = db.collection('av_deliveries').doc(db.collection('av_deliveries'))
  

• 正确代码示例：

  // 正确逻辑：不传参调用doc()，直接拿到带自动ID的引用
  const deliveryRef = db.collection('av_deliveries').doc()
  // 后续用这个引用调用set写入即可，deliveryRef.id就是生成的随机ID
  

异常2：Unsupported field value: undefined 报错根因定位 #

这个问题是Firestore序列化校验的强制规则导致的：Firestore写入接口不接受值为undefined的字段，只要传入的对象里有任意一个字段是undefined类型，就会触发这类报错。哪怕你调整字段名，只要换个字段还是存在undefined值就会继续报错，根本原因不是字段名的问题，是值的类型不符合要求。
常见的undefined值产生场景：

• 表单状态初始化漏写字段：比如用useState定义表单状态时，只初始化了firstname，漏掉了lastname的初始值，导致字段默认值为undefined，提交时直接传入就触发报错
• 表单输入框的name属性和状态键名错位：比如输入框的name是lastName（大驼峰），状态里存储的键是lastname（全小写），导致变更监听逻辑永远无法给对应字段赋值，字段值一直保持初始的undefined
• 赋值时变量拼写错误：比如给lastname字段赋值时，把变量名拼错成lastName，导致取值结果为undefined
• 可选字段用户未填写时没有兜底值：用户没填的可选字段默认是undefined，没有替换成空字符串/null就直接传入写入接口

对应修复方案：

• 提交前做数据清洗：遍历要写入的对象，把所有值为undefined的字段替换成空字符串、null，或者直接过滤掉这类字段，示例代码：

  const sanitizeData = (rawData) => {
    return Object.fromEntries(
      Object.entries(rawData).filter(([_, val]) => val !== undefined)
    )
  }
  // 提交时先清洗再传入set()方法
  await deliveryRef.set(sanitizeData(submitPayload))
  

• 表单状态初始化时给所有字段设置空字符串的默认值，不要留undefined的空值缺口
• 提交前打印最终待写入的全量数据，逐字段核对值的类型，快速定位哪个字段存在undefined值，比靠报错提示逐个换字段效率高很多

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