Next.js结合Firestore开发时报.map is not a function错误如何解决

报错根源 #

db.collection("Farmacies").get()异步返回的结果是Firebase专属的QuerySnapshot类型对象，并非原生数组，本身不内置map方法，直接调用就会触发".map is not a function"报错。

修复方法 #

你需要先访问QuerySnapshot实例的docs属性，拿到所有符合查询条件的文档快照组成的原生数组后，再执行遍历操作：

const [farmacy, setFarmacy] = useState([]);

const fetchData = async () => {
  const db = Fire.firestore();
  const querySnapshot = await db.collection("Farmacies").get();
  // 先取docs属性拿到数组再map
  setFarmacy(querySnapshot.docs.map((doc) => doc.data()));
};

可选优化 #

如果后续需要用到文档的id字段，可以在遍历的时候一并提取：

setFarmacy(querySnapshot.docs.map((doc) => ({
  id: doc.id,
  ...doc.data()
})));

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