如何在Vue生命周期钩子中从Firebase/Firestore获取数组并在组件中使用

• 已开发列表入口页，用户点击单个列表后会通过路由跳转至列表详情页，展示当前列表下的所有条目
• 数据存储逻辑：Firebase 中的 List 集合，每个文档对应一个用户创建的列表，文档内的list_ids字段存储该列表关联的所有条目的ID数组
• 目标：读取当前列表文档内的ID数组，批量查询Item集合中匹配的条目，将结果存入组件响应式变量，完成页面渲染
• 已实现基础逻辑：能通过路由携带的列表ID查询到对应List文档，读取到列表的基础信息（名称、关联ID数组）

• 变量名匹配错误：代码中试图读取this.list_IDs获取ID数组，但实际List文档里的对应字段是list_ids，根本无法读取到数组值
• 语法与API调用错误：使用的forEach(id in ...)写法混淆了for-in循环和数组forEach方法，同时Firebase的文档查询API写错（把doc()写成了document()），且使用了不存在的getDocument方法
• 异步逻辑顺序错误：列表文档查询是异步过程，没有等待列表数据加载完成就尝试读取ID数组，此时列表数据还未赋值到组件变量上，必然拿不到值
• 异步结果处理错误：每个Item文档的查询都是独立的异步请求，没有等待所有查询完成就尝试提取结果，无法把所有条目正确存入items变量
• 组件依赖缺失：没有在代码中引入Item集合的查询引用itemRef，不具备查询条目数据的能力

<template>
  <div class="card card-body mt-4">
    <h3> {{ list?.name ?? '数据加载中' }} </h3>
    <a v-for="item in items" :key="item.id" class="d-block py-1">
      {{ item }}
    </a>
  </div>
</template>

<script>
// 需确保firebase配置文件中已经导出Item集合的引用itemRef
import { listRef, itemRef } from '@/firebase'

export default {
  name: 'ListView',
  data() {
    return {
      id: this.$route.params.id,
      list: null,
      // 初始值设为空数组，避免模板渲染时因items为null报错
      items: []
    }
  },
  created() {
    this.loadListDetail()
  },
  methods: {
    async loadListDetail() {
      try {
        // 第一步：查询当前路由对应的列表文档
        const listDoc = await listRef.doc(this.id).get()
        if (!listDoc.exists) {
          console.log("No such list")
          return
        }
        // 将列表数据存入响应式变量
        this.list = listDoc.data()
        // 从列表数据中取出存储的条目ID数组，兜底为空数组避免报错
        const itemIds = this.list.list_ids || []

        // 第二步：批量查询所有匹配的条目文档
        // 收集每个ID对应的文档查询Promise
        const itemQueryTasks = itemIds.map(id => itemRef.doc(id).get())
        // 等待所有查询完成返回
        const itemDocs = await Promise.all(itemQueryTasks)
        // 过滤掉不存在的文档，提取条目数据存入items
        this.items = itemDocs
          .filter(doc => doc.exists)
          .map(doc => ({ id: doc.id, ...doc.data() }))
      } catch (error) {
        console.error('列表详情加载失败', error)
      }
    }
  }
}
</script>

• 必须等List文档的异步查询完成、把列表数据赋值给组件变量后，才能读取list_ids字段，否则会拿到undefined值
• 批量查询多个独立文档时，需要把每个查询的Promise收集后通过Promise.all统一等待，不能在forEach的异步回调里直接赋值items，否则会因为异步执行顺序问题出现变量值不更新的情况
• 模板渲染时使用可选链（list?.name）做兜底，避免列表未加载完成时因list为null直接触发渲染错误
• 不要混淆数组遍历的语法，forEach的回调是接收当前遍历元素作为参数，而不是用in语法写在方法括号里

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