React调用users.map报错is not a function 读取Firestore文档数据异常

• map() 是JavaScript数组专属的实例方法，你查询的是Firestore的单个文档（调用了.doc(id)方法），doc.data()返回的是单个对象而非数组，你将对象赋值给users状态后调用map方法，自然会触发类型错误。
• 额外注意：你当前写的map回调逻辑也存在问题，使用花括号包裹逻辑时没有显式return元素，就算users是数组也渲染不出内容，同时循环渲染列表项需要绑定key属性否则React会抛出告警。

方案1：业务为获取单个用户（符合你当前的单文档查询逻辑） #

你当前的查询逻辑就是获取指定id的单个用户，不需要使用map遍历，调整代码如下：

1. 调整状态语义与初始化值，避免和数组混淆：

// 把原来的users改成user，初始化值设为null更符合对象类型预期
const [user, setUser] = useState(null);

2. 调整渲染逻辑，直接判断后渲染即可：

{user && <li>{user.firstName}</li>}

方案2：业务需要获取全部用户列表 #

如果你实际需要遍历所有用户，那说明你当前的Firestore查询逻辑有误，需要改成查询整个集合而非单个文档：

1. 调整查询逻辑：

const getData = async () => {
  try {
    const usersRef = firestore.collection("users");
    // 去掉.doc(id)，获取整个集合的快照
    const snapshot = await usersRef.get();
    if (snapshot.empty) {
      console.log("No user documents!");
    } else {
      // 遍历所有文档提取数据组成数组后赋值
      const usersList = snapshot.docs.map(doc => doc.data());
      setUsers(usersList);
    }
  } catch (err) {
    console.log(err);
  }
};

2. 调整渲染逻辑，修正map回调写法并补充key属性：

{users &&
  users.map((user, index) => {
    return <li key={index}>{user.firstName}</li>;
  })
}
// 也可以用圆括号隐式return简化写法
{users &&
  users.map((user, index) => (
    <li key={index}>{user.firstName}</li>
  ))
}

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