使用collectionData从FireStore获取数据时遇Query类型匹配错误

问题详情 #

我有一个存储了数据的Firestore数据库，但在尝试获取记录时遇到错误：

ERROR FirebaseError: Expected type 'Query', but it was: a custom wh object.

组件代码 #

import { Firestore, addDoc, collection, collectionData } from '@angular/fire/firestore'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {

  constructor(private fs: Firestore) { }

  addToFireStore(data: any) {
    const collectionInstance = collection(this.fs, 'users')
    addDoc(collectionInstance, data).then(() => {
      console.log('saved successfully')
    }).catch((error) => console.log(error))
  }

  getDataFromFireStore() {
    const collectionInstance = collection(this.fs, 'users')
    collectionData(collectionInstance).subscribe(val => console.log(val))
  }
}

package.json依赖片段 #

{
  "private": true,
  "dependencies": {
     ...
    "@angular/fire": "7.6.1",
    "firebase": "^10.4.0",
    "rxfire": "6.0.4",
    "rxjs": "~7.5.0",
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.3",
    "@angular/cli": "^15.2.9",
    "@angular/compiler-cli": "^15.0.0",
    "typescript": "~4.8.2"
  }
}

问题原因与解决方法 #

原因 #

@angular/fire版本与firebase版本不兼容：@angular/fire 7.6.1仅支持Firebase 9.x系列，而你安装的是Firebase 10.x，版本不匹配导致内部类型转换异常，抛出该错误。

解决方式 #

有两种可行方案：

1. 降级Firebase到兼容版本
   无需升级Angular，直接将Firebase降级到9.x的稳定版本：

   npm install firebase@^9.23.0 --save
   

2. 同步升级Angular与@angular/fire
   如果希望使用Firebase 10.x，需要将@angular/fire升级到16.x及以上版本（该版本支持Firebase 10.x），同时Angular版本需升级到16+（@angular/fire版本与Angular版本强绑定）：

   # 先升级Angular核心包
   ng update @angular/cli @angular/core
   # 再升级@angular/fire
   ng update @angular/fire
   

验证 #

修改版本后，重新启动项目，调用getDataFromFireStore方法即可正常获取Firestore中的用户记录。

内容的提问来源于stack exchange，提问作者Brijesh P Thankachan