如何将Firebase子集合文档存入数组？AngularFirestore技术问题

这是典型的异步操作时序问题：Firebase的snapshotChanges()是异步请求，subscribe回调里的代码会等到Firebase返回数据后才执行，但你外部的console.log和表单初始化是同步代码，会先于异步回调执行，这时候busStops还没被赋值，自然是undefined或null。

你完全可以将数据存入数组供外部使用，只需要调整代码的执行顺序，确保在数据返回后再操作依赖它的逻辑。下面提供两种常用的实现方式：

方式一：在异步回调中更新表单 #

先初始化表单的基础字段，等数据返回后再更新busStops控件的值：

// AddBusrouteComponent 代码修改
ngOnInit(): void {
  // 先初始化表单（busStops暂设为null）
  this.form = this.fb.group({
    id:[this.id, []],
    routeNo:[this.routeNo, [Validators.required]],
    description: [this.description, [Validators.required]],
    destination: [this.destination, [Validators.required]],
    arrival: [this.arrival, [Validators.required]],
    busStops: [null]
  });

  this.getBusStops(this.id);
}

getBusStops(id:string){
  this.dataApi.getBusStopsByRoute(id).subscribe(res=>{
    this.busStops = res.map((e:any)=>{
      const data = e.payload.doc.data();
      data.id = e.payload.doc.id;
      return data;
    });
    // 数据返回后，更新表单的busStops字段
    this.form.patchValue({ busStops: this.busStops });
    console.log('更新后的表单值: ', this.form.value);
  });
}

方式二：用async/await将异步请求转为同步执行 #

借助RxJS的firstValueFrom把Observable转为Promise，用async/await让代码按顺序执行：

// 先导入firstValueFrom
import { firstValueFrom } from 'rxjs';

// AddBusrouteComponent 代码修改
async ngOnInit(): Promise<void> {
  // 先等待busStops数据返回
  this.busStops = await this.getBusStops(this.id);
  
  // 再初始化表单
  this.form = this.fb.group({
    id:[this.id, []],
    routeNo:[this.routeNo, [Validators.required]],
    description: [this.description, [Validators.required]],
    destination: [this.destination, [Validators.required]],
    arrival: [this.arrival, [Validators.required]],
    busStops: this.busStops
  });

  console.log('表单值: ', this.form.value);
}

async getBusStops(id:string): Promise<any[]> {
  const res = await firstValueFrom(this.dataApi.getBusStopsByRoute(id));
  return res.map((e:any)=>{
    const data = e.payload.doc.data();
    data.id = e.payload.doc.id;
    return data;
  });
}

• 如果用subscribe方式，记得在组件销毁时取消订阅（比如用takeUntil操作符），避免内存泄漏；
• 用async/await时建议加上try/catch捕获请求错误，比如：

  async ngOnInit(): Promise<void> {
    try {
      this.busStops = await this.getBusStops(this.id);
      // 初始化表单...
    } catch (err) {
      console.error('获取站点数据失败:', err);
    }
  }
  

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