从Firestore拉取数据时Observable类型不匹配报错如何解决

报错原因 #

你调用db.collection()方法时没有指定集合存储的数据类型，TypeScript无法推断返回结果的类型，默认会将valueChanges()的返回值判定为Observable<unknown[]>，和你声明的users变量类型Observable<User[]>不匹配，因此抛出类型错误。

修复方案 #

方案1：直接给collection方法指定泛型（最简方案） #

给collection方法传入你定义的User接口作为泛型参数，明确告知TypeScript该集合存储的是User类型数据：

constructor(public auth: AngularFireAuth, public db: AngularFirestore) {
  // 只需要在collection后添加<User>泛型即可
  this.users = this.db.collection<User>("users").valueChanges(); 
}

方案2：复用已声明的usersCollection变量 #

你已经定义了带User泛型的usersCollection变量，可以先给它赋值再取值，方便后续对集合做增删改操作复用：

constructor(public auth: AngularFireAuth, public db: AngularFirestore) {
  this.usersCollection = this.db.collection<User>("users");
  this.users = this.usersCollection.valueChanges();
}

补充说明 #

如果你需要把Firestore的文档ID映射到User接口的uid字段，可以给valueChanges传配置项，无需额外做数据转换：

this.users = this.db.collection<User>("users").valueChanges({ idField: 'uid' });

内容的提问来源于stack exchange，提问作者Alper Efe Sahin