React调用Firestore的addDoc传入对象报错，如何解决无效数据undefined问题？

问题根源 #

报错核心是传递给addDoc的对象中存在undefined值，Firestore不允许任何字段（包括嵌套对象的属性）的值为undefined。从你的代码看，至少有两个明确问题：

1. basket是对象，但你用了basket.length——对象本身没有length属性，这个值直接是undefined，触发报错。
2. 顶层字段（newName/newEmail等）或basket对象内部可能存在未赋值的undefined属性。

具体修复步骤 #

1. 修正numberOfBooks的计算逻辑
   因为basket是对象，获取其属性数量要改用Object.keys(basket).length，替换原代码中的basket.length：

   numberOfBooks: Object.keys(basket).length,
   

2. 添加清理undefined字段的工具函数
   写一个通用函数过滤对象中值为undefined的属性，覆盖顶层字段和嵌套的basket：

   const cleanObject = (obj) => {
     return Object.fromEntries(
       Object.entries(obj).filter(([_, value]) => value !== undefined)
     );
   };
   

3. 重构handleSubmit函数
   用工具函数处理整个提交对象，同时给顶层字段加空字符串兜底，避免undefined：

   const handleSubmit = () => {
     const orderData = cleanObject({
       name: newName || '',
       email: newEmail || '',
       phone: newPhone || '',
       home: newHome || '',
       pinCode: newPinCode || '',
       city: newCity || '',
       state: newState || '',
       numberOfBooks: Object.keys(basket).length,
       order: cleanObject(basket),
     });
   
     addDoc(orderCollectionRef, orderData).then(makePayment);
   };
   

额外排查建议 #

• 在调用addDoc前打印orderData，确认所有字段都没有undefined：

  console.log('待提交数据:', orderData);
  

• 检查表单输入的绑定逻辑，确保newName、newEmail等变量确实获取到了用户输入的值，没有因为绑定错误导致undefined。

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