从Firebase数据库获取数据时触发TypeError错误求助

这个错误我之前帮不少开发者排查过，核心问题是你的项目中Angular、AngularFire2、Firebase以及RxJS之间的版本严重不兼容，导致Firestore模块初始化时出现了语法层面的冲突。下面是具体的分析和解决方案：

问题根源拆解 #

1. AngularFire2与Angular版本不匹配：你用的是Angular 5.x，但安装的angularfire2@5.0.0-rc.8.1-next是为Angular 6+准备的预览版本，它内部使用了Angular 6的API和RxJS 6的语法，和Angular 5的环境不兼容。
2. Firebase SDK版本过高：firebase@5.0.4是较新的版本，而适配Angular 5的AngularFire2稳定版本只支持Firebase 4.x系列。
3. RxJS版本冲突：你同时安装了RxJS 5.5.11和rxjs-compat 6.2.0，rxjs-compat 6.x是给RxJS 6做向下兼容的工具包，和RxJS 5.x混用会导致操作符调用错误。

具体修复步骤 #

1. 卸载不兼容的依赖包 #

首先把当前冲突的包全部卸载：

npm uninstall angularfire2 firebase rxjs-compat

2. 安装适配Angular 5的对应版本 #

安装专门为Angular 5优化的AngularFire2稳定版本，以及对应的Firebase SDK：

npm install angularfire2@5.0.0-rc.6 firebase@4.13.1 --save

说明：angularfire2@5.0.0-rc.6是Angular 5生态中Firestore支持最稳定的版本，firebase@4.13.1是与之完全兼容的SDK版本。

3. 确保AppModule正确导入Firestore模块 #

检查你的根模块（通常是AppModule）是否正确导入了AngularFire相关模块，这一步很容易遗漏：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { environment } from '../environments/environment';

import { AppComponent } from './app.component';
import { FirestoreService } from './services/firestore.service';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 初始化Firebase
    AngularFireModule.initializeApp(environment.firebase),
    // 导入Firestore模块
    AngularFirestoreModule
  ],
  providers: [FirestoreService],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 验证你的服务代码 #

你的FirestoreService代码本身没有问题，但可以补充获取数据的方法来测试，比如：

// 在FirestoreService中添加获取导师列表的方法
getTutors(): Observable<Tutor[]> {
  return this.tutorsCollection.snapshotChanges().map(changes => {
    return changes.map(a => {
      const data = a.payload.doc.data() as Tutor;
      data.id = a.payload.doc.id;
      return data;
    });
  });
}

注意：因为用的是RxJS 5.x，所以用map操作符需要导入：import 'rxjs/add/operator/map';

版本对应参考表（Angular 5.x场景） #

完成以上步骤后，重启你的Angular项目，应该就能正常初始化Firestore并获取tutors集合的数据了。

内容的提问来源于stack exchange，提问作者Idris.AH