Ionic项目调用Firebase数据报错：object(...) is not a function

这个报错几乎可以肯定是RxJS版本不兼容导致的——你现在的代码用了RxJS 5.x的语法，但你的Ionic/Angular环境大概率是RxJS 6+，两者的操作符使用方式和导入路径完全不同。下面是具体的修复步骤：

1. 修正RxJS的导入语句 #

把你home.ts里的RxJS相关导入替换成RxJS 6+的正确写法：

// 替换旧的Observable导入
import { Observable } from 'rxjs';
// 单独导入需要用到的pipeable操作符
import { map } from 'rxjs/operators';
// 删掉没用的AjaxObservable导入，你代码里根本没用到它

2. 改用pipeable操作符语法 #

RxJS 6+不再支持直接链式调用.map()这类操作符，必须把操作符放到pipe()方法里。修改你constructor里的代码：

constructor(public navCtrl: NavController, private shopping:ShoppingListService) {
  this.shoppingList$ = this.shopping 
    .getShoppingList() 
    .snapshotChanges() 
    // 把原来的链式map改成pipe包裹的形式
    .pipe(
      map(changes => {
        return changes.map(c => ({ 
          key: c.payload.key, 
          ...c.payload.val(), 
        }));
      })
    );
}

3. 确认AngularFire与版本兼容性 #

还要检查你的@angular/fire和firebase包版本是否和当前Ionic的Angular版本匹配：

• 打开package.json查看版本号，比如Ionic 4+对应Angular 8+，需要@angular/fire 5.x以上、firebase 7.x以上
• 如果版本不匹配，执行更新命令：

npm install @angular/fire@latest firebase@latest --save

额外检查：ShoppingListService的实现 #

确保你的ShoppingListService里的getShoppingList()方法正确返回AngularFire的Observable，比如：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Item } from '../../models/item/item.model';

@Injectable()
export class ShoppingListService {
  constructor(private db: AngularFireDatabase) {}

  getShoppingList(): Observable<Item[]> {
    // 这里的路径要和你Firebase实时数据库里的节点名称一致
    return this.db.list<Item>('shopping-list');
  }
}

报错原因说明 #

RxJS 6+对整个库做了重构：

• 操作符从原来的链式调用改成了pipe()包裹的pipeable形式
• 导入路径从rxjs/Observable改成了rxjs，操作符需要从rxjs/operators单独导入
• 旧的语法在RxJS 6+环境下会被解析成无效的函数调用，从而抛出object(...) is not a function错误

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