React结合Firestore使用时报Objects are not valid as a React child错误如何解决

你触发报错的核心原因是直接将JS对象作为React子元素渲染。React不支持直接渲染普通对象，只能渲染字符串、数字、React节点等合法类型。
你存入users数组的每一项都是包含id、value两个属性的对象，渲染时直接写{user}就会触发该报错。

• 渲染时不要直接输出整个user对象，明确指定需要展示的字段即可。user.value存储的是你从Firestore拉取的用户文档数据，根据你Users集合里实际存储的字段，取对应的属性值展示，比如用户姓名、邮箱等。
• 优化列表结构：你当前每一条用户数据对应一个<ul>标签不符合语义，建议外层统一用一个<ul>，每条用户数据对应一个<li>。另外列表的key优先用唯一的用户id，不要用map的index，避免列表重排时出现渲染异常。
• 你初始化users时已经设置了空数组作为默认值，不需要额外判断users != null，空数组调用map方法不会报错。

修复后的渲染代码示例：

<p>Here is the list of all the users that are in the database: </p>
<ul>
  {users.map((user) => (
    <li key={user.id}>
      用户ID：{user.id}，用户名：{user.value.name}，邮箱：{user.value.email}
      {/* 此处字段根据你Users集合里实际存储的内容调整即可 */}
    </li>
  ))}
</ul>

如果不确定user.value里的字段结构，可以在渲染时加console.log(user.value)打印查看，对应取属性即可。

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