Angular Firebase 如何获取Firestore子集合文档数据

• 服务层的getScheduleList没有向外返回可观测数据流，反而在内部嵌套了两层独立的subscribe，内层拉到的schedules数据完全没有往外抛，组件层面拿到的返回值是undefined，根本没法赋值给scheduleList供模板使用
• 对snapshotChanges的返回结构没有做正确提取，直接把带元信息的原始文档对象暴露出来，看起来就像是“只能拿到元数据”，没有把文档存储的实际业务字段拆分出来
• 全量拉取整个companies集合在客户端做循环匹配用户ID的写法，不仅效率低，还容易因为遍历时机问题拿不到正确的公司ID

第一步：改造schedule.service.ts的返回逻辑 #

把所有嵌套subscribe的逻辑替换成RxJS扁平流，让方法直接返回带业务数据的可观测对象：

import {Injectable} from '@angular/core';
import {AngularFirestore} from '@angular/fire/firestore';
import {Schedule} from '../../model/schedule';
import {map, switchMap} from 'rxjs/operators';
import {AuthService} from '../../auth/auth.service';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ScheduleService {

  constructor(public fireService: AngularFirestore, private authService: AuthService) {
  }

  getScheduleList(): Observable<Schedule[]> {
    // 用服务端查询过滤替代客户端全量遍历，只拉取匹配当前用户的公司文档
    return this.fireService.collection(
      'companies',
      ref => ref.where('UID', '==', this.authService.currentUserId)
    ).snapshotChanges().pipe(
      // 拿到匹配的公司ID后，自动切换到对应子集合的数据流
      switchMap(companyActions => {
        // 正常一个用户仅对应一个公司，直接取匹配到的第一条记录的ID即可
        const companyId = companyActions[0].payload.doc.id;
        // 拉取该公司下的schedules子集合
        return this.fireService.collection(`companies/${companyId}/schedules`).snapshotChanges();
      }),
      // 把元数据结构映射为带文档ID的纯业务对象
      map(scheduleActions => {
        return scheduleActions.map(action => {
          const docData = action.payload.doc.data() as Omit<Schedule, 'id'>;
          const docId = action.payload.doc.id;
          return { id: docId, ...docData };
        });
      })
    );
  }
}

第二步：改造组件层的接收逻辑 #

把服务返回的数据流订阅下来，拿到映射好的业务数据后赋值给类成员scheduleList，供模板渲染使用：

// 替换组件内原有的getScheduleList方法
getScheduleList() {
  this.serviceSchedule.getScheduleList().subscribe({
    next: (scheduleList) => {
      this.scheduleList = scheduleList;
    },
    error: (err) => {
      console.error('获取日程列表失败', err);
    }
  });
}

• 写RxJS流时绝对不要在流的链路内部嵌套subscribe，这种写法不仅会导致数据跨层传递失败，还容易因为不主动退订造成内存泄漏，所有需要切换数据源的逻辑，统一用switchMap/concatMap这类扁平操作符完成
• snapshotChanges返回的结构本身就不是纯业务数据，而是包含文档变更状态、文档引用、元信息的包装结构，必须通过payload.doc.data()才能拿到文档中实际存储的字段，直接把原始返回值拿去给模板渲染，自然只会看到元数据结构
• 如果想简化组件里的手动订阅逻辑，可以把scheduleList直接定义为可观测对象类型，模板渲染时配合async管道使用，框架会自动帮你处理订阅、数据赋值、页面销毁时自动退订的流程，减少冗余代码。

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