如何从返回的Firebase嵌套JSON响应中访问bills对象列表？

响应结构特征 #

当前拿到的响应属于Firebase 多文档集合的返回结构：顶层对象的每个键是系统自动生成的随机文档唯一ID，无固定命名规则，每个ID对应的嵌套对象中，存储了包含目标bills字段的文档内容。

不同场景的访问代码 #

• 汇总获取所有文档下的全量bills列表
  遍历响应顶层的所有文档键，逐个取出对应文档内的bills数组做合并即可，代码示例：

  // 假设 firebaseRes 是已获取到的完整Firebase响应对象
  const mergedAllBills = []
  Object.keys(firebaseRes).forEach(docId => {
    const docData = firebaseRes[docId]
    // 增加类型校验，避免字段缺失抛出空引用错误
    if (Array.isArray(docData?.bills)) {
      mergedAllBills.push(...docData.bills)
    }
  })
  

  执行完成后，mergedAllBills就是所有文档下bills拼接后的完整列表，每个元素都自带name和price属性。
• 获取指定ID文档对应的bills列表
  当明确需要取数据的目标文档ID时，可直接通过键值路径访问，代码示例：

  const targetDocId = "MYxia564oxQm-iYUMkO"
  // 通过可选链做空值兜底，避免文档不存在时报错
  const singleDocBills = firebaseRes[targetDocId]?.bills ?? []
  

适配Firebase官方SDK的简化处理 #

如果是直接通过Firebase SDK拉取数据、获取到的是数据快照而非手动解析的原始JSON，无需手动拆解顶层的随机文档键，可直接借助快照自带的遍历方法处理数据：

import { getDatabase, ref, onValue } from "firebase/database"

const collectionRef = ref(getDatabase(), "你的数据集合路径")
onValue(collectionRef, (snapshot) => {
  const billsResult = []
  snapshot.forEach(childSnap => {
    const docContent = childSnap.val()
    if (Array.isArray(docContent?.bills)) {
      billsResult.push(...docContent.bills)
    }
  })
  // 对拿到的billsResult做后续渲染、逻辑计算即可
})

实操提醒：所有取值逻辑建议增加空值、字段类型校验，避免单条文档缺失字段导致整个数据流程崩溃。

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