React前端向Firestore添加指定结构对象时触发报错，求解决方案

• 你用arrayUnion添加对象到Firestore数组的写法本身没问题，报错根源是后续在React组件里直接渲染了对象类型的数据——React不允许把对象当作子元素渲染，和Firestore的添加操作无关。

• 先确认Firestore数据是否正确写入：
  打开Firebase控制台查看目标文档，检查users数组里是否已经成功添加了{ username: "yeah", items: [...] }结构的对象。如果数据存在，说明添加操作完全正常，只需要修复React的渲染逻辑。

• 修复React渲染错误：
  渲染users数组时，必须解构对象的具体属性，不能直接渲染整个对象。示例代码如下：

  // 假设从Firestore获取到的users数组存在state中
  const [users, setUsers] = useState([]);
  
  // 正确的渲染方式
  return (
    <div className="user-list">
      {users.map((user, idx) => (
        <div key={idx} className="user-item">
          <h3>{user.username}</h3>
          <div className="items">
            <span>物品：</span>
            <ul>
              {user.items.map((item, itemIdx) => (
                {/* 如果item是字符串/数字直接渲染；如果是对象，要继续解构其属性，比如item.name */}
                <li key={itemIdx}>{item}</li>
              ))}
            </ul>
          </div>
        </div>
      ))}
    </div>
  );
  

  若items存储的是嵌套对象（比如{ name: "笔记本", count: 2 }），则要渲染具体属性（如{item.name}），不能直接写{item}。

• 额外检查项：

  • 确保items是Firestore支持的数据类型（字符串、数字、数组、普通对象等均可，不能是函数、Symbol这类无法序列化的类型），否则Firestore更新时会报错，但这不是你当前遇到的React渲染错误。
  • 确认usersRef是正确的文档引用（比如doc(db, "你的集合名", "目标文档ID")），避免因引用错误导致数据未写入，但这也不会触发React的渲染报错。

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