如何在Angular 11中使用Firestore列出所有集合？解决listCollections()失效问题

场景说明 #

• 通用需求：掌握Firestore中列出所有集合、指定文档下全部子集合的实现方法
• 业务场景：Angular 11项目中，需要获取companies集合下匹配指定ID的文档内的所有子集合
• 异常表现：按照现有代码调用listCollections()方法未得到预期结果，现有实现代码如下：

const snapshot = await this.firestore.collection("companies").doc(this.id).listCollections().valueChanges();
snapshot.subscribe(val=> this.data.push(val))
console.log(this.data);

问题根因 #

• 方法调用链路错配：listCollections()本身是Firestore原生SDK在DocumentReference实例上提供的方法，返回值是「当前文档下所有直接子集合的引用数组」的Promise，不是AngularFire封装的可订阅Observable。你现在的代码是在AngularFire的doc封装对象上直接调用listCollections()，之后再接.valueChanges()——这个链路下listCollections()拿到的返回值根本没有valueChanges方法，自然没法正常生效。
• 执行时序错位：你把console.log放在了subscribe代码块的外部，JS是同步执行先跑这行打印，这时候subscribe的异步回调还没触发，this.data当然是空的，哪怕前面链路写对了也拿不到正确结果。

正确实现步骤 #

1. 拆分SDK调用层级：先从AngularFire封装的文档引用中，取出原生SDK对应的DocumentReference实例
2. 调用原生实例的listCollections()方法，等待Promise resolve拿到所有子集合的CollectionReference数组
3. 对每个拿到的子集合引用，再通过AngularFire的collection方法封装为Observable流做订阅操作
4. 将数据赋值、日志打印等操作全部放在订阅回调内部，匹配异步执行时序

参考实现代码：

async loadCompanySubCollections() {
  // 获取目标文档的原生Reference对象
  const targetDocRef = this.firestore.collection("companies").doc(this.id).ref;
  try {
    // 等待原生listCollections方法返回子集合引用列表
    const subCollectionRefs = await targetDocRef.listCollections();
    // 遍历所有子集合，执行对应业务读取
    subCollectionRefs.forEach(colRef => {
      this.firestore.collection(colRef).valueChanges().subscribe(res => {
        this.data.push(...res);
        // 数据赋值完成后再执行打印或后续业务逻辑
        console.log(this.data);
      })
    })
  } catch (error) {
    console.error("获取子集合失败", error);
  }
}

注意事项 #

• listCollections()仅能查询当前文档下的直接一级子集合，不支持递归获取多层嵌套的子集合
• AngularFire所有基于流的订阅操作均为异步执行，禁止在订阅回调外部同步读取订阅后更新的状态值

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