使用Angularfire 7.5查询数据为何返回undefined？

问题场景 #

使用Angular 15 + Angularfire 7.5开发，settings集合中ID为settings的文档包含一个引用字段。最初的服务方法能成功打印引用文档数据，但修改后在组件中调用时getCurrentGroup()返回undefined。

初始可正常运行的服务代码：

getCurrentGroup(): void {
   this.firestore.collection<Settings>(this.collectionName).doc<Settings>('settings').valueChanges().pipe(take(1)).subscribe(data => {
       data?.currentGroup.get().then(res => { console.log(res.data()) });
   });
}

修改后无法正常返回数据的服务代码：

getCurrentGroup(): any {
    this.firestore.collection<Settings>(this.collectionName).doc<Settings>('settings').valueChanges().pipe(take(1)).subscribe(data => {
      if (data !== undefined) return data?.currentGroup.get();
      else return undefined;
    });
}

组件调用代码：

ngOnInit(): void {
    this.settingsService.getCurrentGroup().then(data => console.log(data));
}

问题原因 #

1. subscribe回调的return无效：subscribe是异步执行的，方法getCurrentGroup()在subscribe回调执行前就已经返回，回调中的return不会成为方法的返回值，因此方法默认返回undefined。
2. Observable与Promise混用错误：你试图对一个没有返回Promise的方法调用.then()，但原方法的逻辑基于Observable，两者异步机制不匹配。

解决方案 #

方案1：返回Observable（Angular推荐方式） #

利用RxJS操作符处理异步流，将Firestore的Promise转成Observable：

import { Observable, from, of } from 'rxjs';
import { switchMap, take } from 'rxjs/operators';
import { DocumentSnapshot } from '@angular/fire/firestore';

// 假设Group是引用文档对应的类型
interface Group {
  // 定义你的字段
}

getCurrentGroup(): Observable<Group | undefined> {
  return this.firestore.collection<Settings>(this.collectionName)
    .doc<Settings>('settings')
    .valueChanges()
    .pipe(
      take(1), // 只取一次数据
      switchMap(settings => {
        // 若没有引用字段，直接返回undefined的Observable
        if (!settings?.currentGroup) {
          return of(undefined);
        }
        // 将Promise转成Observable
        return from(settings.currentGroup.get() as Promise<DocumentSnapshot<Group>>);
      }),
      switchMap(docSnapshot => {
        // 提取文档数据，不存在则返回undefined
        return docSnapshot.exists ? of(docSnapshot.data()) : of(undefined);
      })
    );
}

组件中订阅Observable：

ngOnInit(): void {
  this.settingsService.getCurrentGroup().subscribe(group => {
    console.log(group);
  });
}

也可以配合Angular的async管道在模板中直接使用，无需手动订阅：

<div *ngIf="group$ | async as group">
  {{ group | json }}
</div>

组件中定义：

group$: Observable<Group | undefined>;

ngOnInit(): void {
  this.group$ = this.settingsService.getCurrentGroup();
}

方案2：转成Promise返回 #

如果更习惯Promise的写法，可将Observable转成Promise：

import { firstValueFrom } from 'rxjs';
import { DocumentSnapshot } from '@angular/fire/firestore';

async getCurrentGroup(): Promise<Group | undefined> {
  // 从Observable获取单次值
  const settings = await firstValueFrom(
    this.firestore.collection<Settings>(this.collectionName)
      .doc<Settings>('settings')
      .valueChanges()
      .pipe(take(1))
  );

  if (!settings?.currentGroup) {
    return undefined;
  }

  // 获取引用文档数据
  const docSnapshot = await settings.currentGroup.get() as Promise<DocumentSnapshot<Group>>;
  return docSnapshot.exists ? docSnapshot.data() : undefined;
}

组件中调用（两种方式）：

// 方式1：使用then
ngOnInit(): void {
  this.settingsService.getCurrentGroup().then(group => {
    console.log(group);
  });
}

// 方式2：使用async/await
async ngOnInit(): Promise<void> {
  const group = await this.settingsService.getCurrentGroup();
  console.log(group);
}

Observable与Promise核心区别 #

• 单次 vs 多次：Promise是一次性异步操作，只会触发一次resolve/reject；Observable是数据流，可多次发射值（比如valueChanges会在文档更新时自动推送新数据）。
• Angular适配性：Observable与Angular的变更检测、async管道完美配合，无需手动管理订阅销毁，能避免内存泄漏。
• 操作符支持：RxJS提供大量操作符（如switchMap、map、filter），可轻松处理复杂异步逻辑组合。

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