使用Ionic+AngularFire2从Firebase取数时遇TypeError求助

我正在跟随教程使用Ionic和AngularFire2开发聊天应用，但从Firebase Database获取数据时出现如下TypeError错误：

TypeError: Object(...) is not a function at SwitchMapSubscriber.project (http://localhost:8100/build/vendor.js:74005:76) at SwitchMapSubscriber._next (http://localhost:8100/build/vendor.js:62295:27) at SwitchMapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18) at RefCountSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26) at RefCountSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18) at Subject.next (http://localhost:8100/build/vendor.js:23237:25) at ConnectableSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26) at ConnectableSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18) at Notification.observe (http://localhost:8100/build/vendor.js:51893:50) at AsyncAction.DelaySubscriber.dispatch (http://localhost:8100/build/vendor.js:76316:40)

我的Chat.TS代码： #

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { AngularFireDatabase} from 'angularfire2/database'; 
import { Observable } from 'rxjs/Observable'; 

/**
 * Generated class for the ChatPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-chat',
  templateUrl: 'chat.html',
})
export class ChatPage {
  username: string = '';
  message : string = '';
  //messages : object[] = [];
  items: Observable<any[]>;

  constructor(public db: AngularFireDatabase , public navCtrl: NavController, public navParams: NavParams) {
    console.log(this.navParams);
    this.username = this.navParams.get('username');
    this.items = db.list('chat').valueChanges();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ChatPage');
  }

  sendMessage(){
    this.db.list('/chat').push({
      username:this.username,
      message:this.message
    });
  }
}

我的Chat.HTML代码： #

<ion-header>
  <ion-navbar>
    <ion-title>Chat</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ul>
    <li *ngFor="let item of items | async">
      {{ item | json }}
    </li>
  </ul>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-input type="text" [(ngModel)]="message"></ion-input>
    <button ion-button icon-only (click)="sendMessage()"><ion-icon name="send"></ion-icon>
    </button>
  </ion-toolbar>
</ion-footer>

我尝试了多种实现方式，仍出现相同的对象错误，请问是什么原因导致的？感谢您的帮助。

问题分析与解决办法 #

这个问题大概率是AngularFire2与RxJS的版本不兼容导致的，结合你的代码和错误栈，具体原因和修复步骤如下：

• RxJS导入方式错误：
  你当前代码中导入Observable的方式是RxJS 5.x的写法：import { Observable } from 'rxjs/Observable';，而如果你的AngularFire2版本是5.x及以上，它要求RxJS 6.x+，RxJS 6.x已经将核心Observable的导入路径改为rxjs，需要修改为：

  import { Observable } from 'rxjs';
  

• 依赖版本不匹配：
  AngularFire2和Firebase的版本需要严格匹配，建议执行以下命令更新到最新兼容版本：

  npm install angularfire2@latest firebase@latest --save
  

• 检查Firebase初始化配置：
  确保你在app.module.ts中正确初始化了AngularFire模块，示例配置如下：

  import { NgModule } from '@angular/core';
  import { AngularFireModule } from 'angularfire2';
  import { AngularFireDatabaseModule } from 'angularfire2/database';
  import { environment } from '../environments/environment';
  
  @NgModule({
    imports: [
      AngularFireModule.initializeApp(environment.firebaseConfig),
      AngularFireDatabaseModule
    ]
  })
  export class AppModule { }
  

完成以上步骤后，重新启动Ionic服务，这个TypeError问题应该就能解决了。

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