Angular17+AngularFire17：如何从Service实时返回Firestore文档值

问题根源 #

你的getUserMy函数中，onSnapshot返回的是用于取消监听的函数，而非Promise类型的异步结果。因此用async/await或.then()接收时，拿到的只会是这个取消函数，而非实际的用户数据。

修正后的Service代码 #

import { Firestore, doc, onSnapshot } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { inject, Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class FirebaseService {
  private firestore = inject(Firestore);

  getUserMy(uid: string): Observable<UserMy | undefined> {
    const docRef = doc(this.firestore, 'users', uid);
    
    // 用RxJS Observable封装实时监听逻辑
    return new Observable((observer) => {
      // 订阅文档快照，数据变化时推送新值
      const unsubscribe = onSnapshot(docRef, (doc) => {
        observer.next(doc.exists() ? (doc.data() as UserMy) : undefined);
      }, (error) => {
        observer.error(error);
      });

      // 返回取消订阅函数，组件销毁时自动停止监听
      return unsubscribe;
    });
  }
}

组件中调用的代码 #

import { FirebaseService } from './path/to/firebase.service';
import { inject, OnInit } from '@angular/core';

export class YourComponent implements OnInit {
  private fs = inject(FirebaseService);
  userMy?: UserMy;

  ngOnInit() {
    // 订阅Observable获取实时更新的数据
    this.fs.getUserMy('xxxxxxxxx').subscribe({
      next: (user) => {
        this.userMy = user;
        console.log('实时用户数据:', user);
      },
      error: (err) => console.error('获取数据失败:', err)
    });
  }
}

核心说明 #

1. 实时监听用Observable：onSnapshot是持续监听文档变化的API，适合用RxJS Observable处理流式数据，而非只能处理单次结果的Promise。
2. 自动清理资源：Observable返回的取消订阅函数，会在组件销毁时（若使用async管道或手动取消）自动停止监听，避免内存泄漏。
3. 单次获取的替代方案：若无需实时更新，可改用getDoc方法，它返回Promise，适合用async/await调用。

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