为何Angular 16环境下使用collectionData读取Firestore数据失败？

我不是Angular专家，在Angular 15环境里能正常用@angular/fire/firestore的collectionData读取Cloud Firestore全量数据，但升级到Angular 16后就无法实现，报错提示类型不匹配。

可正常运行的环境配置 #

_                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 15.0.2
Node: 18.12.1
Package Manager: npm 9.6.7
OS: win32 x64

Angular: 15.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.2
@angular-devkit/build-angular   15.0.2
@angular-devkit/core            15.0.2
@angular-devkit/schematics      15.0.2
@angular/cdk                    15.0.0
@angular/fire                   7.6.1
@angular/material               15.0.0
@schematics/angular             15.0.2
rxjs                            7.5.7
typescript                      4.8.4

无法运行的环境配置 #

/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 15.2.0
Node: 18.12.1
Package Manager: npm 9.6.7
OS: win32 x64

Angular: 16.2.6
... animations, common, compiler, compiler-cli, core, forms     
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.3
@angular-devkit/build-angular   16.2.3
@angular-devkit/core            16.2.3
@angular-devkit/schematics      16.2.3
@angular/cli                    15.2.0
@angular/fire                   7.6.1
@schematics/angular             16.2.3
rxjs                            7.8.1
typescript                      5.1.6

服务代码 #

import { Injectable } from '@angular/core';
import { Firestore, addDoc, collection, collectionData, doc, getDocs, query } from '@angular/fire/firestore';
import { Place } from '../interfaces/place';
import { Observable, map } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PlaceService {

  constructor(private firestore: Firestore) { }

  addPlace(place: Place) {
    const placeRef = collection (this.firestore, 'places' );
    return addDoc (placeRef, place);
  }

  getPlaces(): Observable<Place[]> {
    const placeRef = collection(this.firestore, 'places');
    return collectionData(placeRef, {idField: 'id'}) as Observable<Place[]>;
 }
}

组件代码 #

import { Component, OnInit } from '@angular/core';
import { Place } from 'src/app/interfaces/place';
import { PlaceService } from 'src/app/services/place.service';

@Component({
  selector: 'app-list-place',
  templateUrl: './list-place.component.html',
  styleUrls: ['./list-place.component.css']
})
export class ListPlaceComponent implements OnInit {

  places: Place[] = [];

  constructor (private placeService: PlaceService) { }

  ngOnInit() {
    this.placeService.getPlaces().subscribe(res => {
      this.places = res
    });
  }
}

报错信息 #

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

package.json内容 #

{
  "name": "pass-h-web-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/fire": "^7.6.1",
    "@angular/forms": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "@ng-bootstrap/ng-bootstrap": "^15.1.1",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.3.2",
    "firebase": "^10.4.0",
    "jquery": "^3.7.1",
    "npm": "^10.1.0",
    "popper.js": "^1.16.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.3",
    "@angular/cli": "^15.2.0",
    "@angular/compiler-cli": "^16.2.0",
    "@angular/localize": "^16.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }
}

问题原因及解决方案 #

问题根源 #

你的@angular/fire版本（7.6.1）只支持Angular 14和15，和当前使用的Angular 16、Firebase 10.4.0版本不兼容，导致类型不匹配错误。

解决步骤 #

1. 卸载旧版本的@angular/fire和firebase：

npm uninstall @angular/fire firebase

2. 安装适配Angular 16的版本：

npm install @angular/fire@^8.0.0 firebase@^10.0.0

3. 检查项目中的Firebase初始化代码，若未使用兼容层可移除@angular/fire/compat/*这类导入，新版本API和你当前的业务代码写法兼容，无需修改逻辑。
4. 同步升级Angular CLI到16.x版本，避免版本不匹配问题：

npm install -g @angular/cli@^16.0.0
npm install @angular/cli@^16.0.0 --save-dev

5. 重新启动开发服务器：

ng serve

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