Angular中Firestore实时监听器：如何让监听器按顺序启动？

在Angular组件的ngOnInit中需要启动两个Firestore监听器，第二个监听器必须等待第一个监听器获取到videoTitle后才能启动（因为第二个监听器的路径依赖videoTitle）。当前代码直接同时启动两个监听器会因为videoTitle未定义导致路径错误，嵌套监听器的尝试出现TypeScript错误，且父组件无法通过ngOnChanges监听自身属性变化。

当前错误代码示例：

ngOnInit(): void {
    const unsubUsers = onSnapshot(doc(this.firestore, 'Users', this.user.uid), async (doc) => {
      if (doc.exists()) {
        this.user = doc.data() as User;
        this.videoTitle = doc.data()['lastVideoWatched'];
      } else {
        console.error('No such document!');
      }
      // unsubUsers();
    });

    const unsubClipInMovieWatching = onSnapshot(doc(this.firestore, "Users/" + this.user.uid + "/" + this.homeToolbarObject.language2.long + "/Videos/" + this.videoTitle?.snake_title, "Clip_In_Movie_Watching"), async (doc) => {
      if (doc.exists()) {
        this.clipInMovieWatching = doc.data()['clip'];
      } else {
        console.error("No such document!");
      }
      // unsubClipInMovieWatching();
    });
}

嵌套监听器时出现的TypeScript错误：

TS2349: This expression is not callable.
Type 'QueryDocumentSnapshot<DocumentData>' has no call signatures.

解决方案 #

1. 修复嵌套监听器的变量冲突问题 #

出现TS错误的核心原因是回调参数名与Firestore的doc函数重名，将内部回调的参数名改为userDoc、clipDoc即可解决。同时要确保videoTitle?.snake_title存在后再启动第二个监听器，避免无效路径。

修复后的嵌套监听代码：

// 组件类中添加属性保存取消订阅函数
unsubUser?: () => void;
unsubClip?: () => void;

ngOnInit(): void {
  // 第一个监听器：获取用户数据与videoTitle
  this.unsubUser = onSnapshot(
    doc(this.firestore, 'Users', this.user.uid),
    (userDoc) => {
      if (userDoc.exists()) {
        this.user = userDoc.data() as User;
        this.videoTitle = userDoc.data()['lastVideoWatched'];
        
        // 验证videoTitle有效后启动第二个监听器
        if (this.videoTitle?.snake_title) {
          this.initClipListener();
        }
      } else {
        console.error('No such User document!');
      }
    }
  );
}

// 封装第二个监听器的初始化逻辑
initClipListener(): void {
  // 先取消已存在的监听，避免重复订阅
  if (this.unsubClip) this.unsubClip();
  
  this.unsubClip = onSnapshot(
    doc(
      this.firestore,
      `Users/${this.user.uid}/${this.homeToolbarObject.language2.long}/Videos/${this.videoTitle.snake_title}/Clip_In_Movie_Watching`
    ),
    (clipDoc) => {
      if (clipDoc.exists()) {
        this.clipInMovieWatching = clipDoc.data()['clip'];
      } else {
        console.error("No such Clip_In_Movie_Watching document!");
      }
    }
  );
}

// 组件销毁或用户登出时取消所有监听，避免内存泄漏
ngOnDestroy(): void {
  this.unsubUser?.();
  this.unsubClip?.();
}

2. 关于监听器取消订阅的说明 #

• 不能跳过unsubClipInMovieWatching()的调用：如果不主动取消订阅，监听器会一直保持活跃，造成内存泄漏。需要将取消订阅函数保存到组件属性中，在组件销毁（ngOnDestroy）或用户登出时调用。
• 如果需要监听直到用户登出：可以在登出事件触发时调用取消订阅函数，无需在回调内部立即取消。

3. 为什么async/await无效 #

onSnapshot是实时监听API，它通过回调函数持续接收数据更新，并不返回Promise，因此async/await无法用于等待它完成。只有单次读取数据的getDoc才返回Promise，适合用async/await。

4. 父组件监听自身属性变化的正确方式 #

ngOnChanges仅监听组件的@Input()输入属性变化，自身属性变更不会触发它。可以通过属性setter或RxJS的BehaviorSubject来监听videoTitle的变化：

方式一：使用属性setter

private _videoTitle: any;
get videoTitle(): any {
  return this._videoTitle;
}
set videoTitle(value: any) {
  this._videoTitle = value;
  // 当videoTitle更新且有效时，初始化第二个监听器
  if (value?.snake_title) {
    this.initClipListener();
  }
}

方式二：使用RxJS BehaviorSubject

import { BehaviorSubject } from 'rxjs';

// 组件类中定义Subject
private videoTitleSubject = new BehaviorSubject<any>(null);

ngOnInit(): void {
  // 监听videoTitle的变化
  this.videoTitleSubject.subscribe(title => {
    if (title?.snake_title) {
      this.initClipListener();
    }
  });
  
  // 第一个监听器中更新Subject
  this.unsubUser = onSnapshot(
    doc(this.firestore, 'Users', this.user.uid),
    (userDoc) => {
      if (userDoc.exists()) {
        const title = userDoc.data()['lastVideoWatched'];
        this.videoTitle = title;
        this.videoTitleSubject.next(title);
      }
    }
  );
}

内容的提问来源于stack exchange，提问作者Thomas David Kehoe