Flutter Web中如何遍历Firebase嵌套子集合并解决onSnapshot报错

你现在的写法错误在于把Firestore路径拼接为字符串，直接作为对象属性调用，JavaScript不会将字符串变量解析为可执行的方法链，因此db.collection("all_merchants").doc(customClaim).collection(customClaim).join本质是访问这个引用对象上名为join的属性，这个属性不存在，所以ref为undefined，调用onSnapshot自然报错。

你需要动态构建Firestore引用，而非拼接字符串：

1. 先初始化基础引用
2. 遍历你存储层级名称的sourceArray，每一层级依次调用doc()和collection()方法更新引用

$(".outer-body").click(function(){
  const src = $(this).text().trim();
  sourceArray.push(src);
  // 初始化基础引用
  let ref = db.collection("all_merchants").doc(customClaim).collection(customClaim);
  // 遍历层级动态构建引用，和你之前拼接字符串的逻辑完全对应
  for (let x = 0; x < sourceArray.length; x++) {
    const levelName = sourceArray[x];
    ref = ref.doc(levelName).collection(levelName);
  }
  console.log('最终引用：', ref);
  // 监听快照
  ref.onSnapshot((querySnapshot) => {
    // 遍历快照内的文档
    querySnapshot.forEach(doc => {
      console.log(doc.id, '=>', doc.data());
    })
  });
})

• Firestore路径天生遵循collection/doc/collection/doc的交替规则，你需要确认自己的层级逻辑和这个规则匹配，如果层级规则有调整，修改遍历过程中的调用顺序即可
• 原代码中onSnapshot回调直接使用的doc变量是你之前定义的字符串，不是快照返回的文档对象，必须遍历querySnapshot获取每个文档实例

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