在Vue 3中如何使用map()将Firestore查询到的文档存储到数组中

问题根源 #

你使用map()处理Firestore查询结果的逻辑完全正确，控制台输出[object Object],[object Object]是因为字符串拼接时会自动调用数组/对象的toString()方法，并非数据没有正确存入myList。

修正方案 #

• 调整打印方式，用逗号分隔多参数打印，控制台会自动展开数组结构查看内部数据：

// 替换原有console.log行
console.log('This is my list: ', myList.value)

• 如果你需要转成字符串查看完整内容，可以用JSON序列化处理：

console.log('This is my list: ' + JSON.stringify(myList.value, null, 2))

验证数据有效性 #

你可以直接在模板中遍历myList渲染数据，完全可以正常读取字段值：

<template>
  <ul>
    <li v-for="item in myList" :key="item.id">
      文档ID：{{ item.id }}，名称：{{ item.name }}
    </li>
  </ul>
</template>

可选优化 #

可以把异步请求改成async/await写法，逻辑更清晰易维护：

setup() {
  const myList = ref([])

  const fetchList = async () => {
    try {
      const querySnapshot = await projectFirestore
        .collection("testcollection")
        .where("name", "==", "Mike")
        .get()
      myList.value = querySnapshot.docs.map(doc => ({ 
        ...doc.data(), 
        id: doc.id 
      }))
      console.log('查询结果：', myList.value)
    } catch (error) {
      console.error('查询失败：', error)
    }
  }

  fetchList()
  return { myList }
}

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