Angular调用Firebase获取笔记集合时登录用户ID为undefined求助

根因 #

this.afAuth.authState.subscribe 是异步回调逻辑，构造函数中初始化notesCollection的同步代码会先执行，此时回调还没触发，this.userData自然还没有被赋值，所以查询时会拿到undefined。

修复方案 #

只需要将笔记集合的初始化逻辑移动到authState的订阅回调内部，确保拿到用户uid之后再执行查询即可，修改后的代码如下：

notesCollection: AngularFirestoreCollection<Note>;
notesDocument: AngularFirestoreDocument<Note>;
userData: string; // Save logged in user data

constructor(
  private afs: AngularFirestore,
  private auth: AuthService,
  private afAuth: AngularFireAuth
) {
  this.afAuth.authState.subscribe((user) => {
    if (user) {
      this.userData = user.uid;
      // 拿到用户uid后再初始化笔记集合
      this.notesCollection = this.afs.collection('notes', (ref) =>
        ref.where('authorId', '==', this.userData).orderBy('date', 'desc')
      );
    } else {
      alert('no data for user');
    }
  });
}

进阶优化（可选） #

如果需要对外返回响应式的笔记数据流，避免嵌套订阅的潜在问题，可以用RxJS的switchMap操作符做流转换，需要提前导入依赖：import { of } from 'rxjs'; import { switchMap } from 'rxjs/operators';

// 对外暴露的笔记可观察流
notes$ = this.afAuth.authState.pipe(
  switchMap(user => {
    if (!user) return of([]);
    return this.afs.collection<Note>('notes', ref => 
      ref.where('authorId', '==', user.uid).orderBy('date', 'desc')
    ).valueChanges();
  })
);

constructor(
  private afs: AngularFirestore,
  private auth: AuthService,
  private afAuth: AngularFireAuth
) {}

这种写法的优势是用户登录状态切换时，notes$会自动切换对应用户的笔记数据，不需要手动管理订阅状态。

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