如何将Firestore查询返回的对象转换为数组（Nuxt.js+NuxtFirebase）

你当前的代码是逐个提交单个文档数据到mutation，导致最终拿到的不是数组。可以通过以下方式修改，将Firestore的查询快照转换为包含所有文档数据的数组：

修改actions中的postList方法 #

把原来的forEach遍历改为map方法，将查询结果里的所有文档转换为数组元素，同时建议保留文档的ID（方便后续操作）：

async postList({commit}){
    try{
      const req = await this.$fire.firestore.collection('Post').get()
      // 将查询快照转为数组，每个元素包含文档ID和数据
      const postsArray = req.docs.map(doc => ({
        id: doc.id, // 保留Firestore文档ID，可选但推荐
        ...doc.data()
      }))
      console.log(postsArray)
      // 一次性提交整个数组到mutation
      commit("SET_POST", postsArray)
    } catch(e){
      console.log(e)
    }
}

对应修改mutation中的SET_POST #

确保你的SET_POST mutation是将state中的posts赋值为传入的数组：

const mutations = {
  SET_POST(state, posts) {
    state.posts = posts
  }
}

说明 #

• Firestore的get()方法返回的是查询快照（QuerySnapshot），它的docs属性是包含所有文档快照的数组。
• 用map遍历docs，把每个文档的ID和数据合并成一个对象，最终得到完整的数组。
• 原来的forEach方式会逐个提交单个对象，不仅无法形成数组，还会导致mutation多次覆盖state值，最终只保留最后一个文档的数据。

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