Angular15引入AngularFirestoreModule出现TS类型错误求助

问题背景 #

我有两个Angular应用，因Firebase读写规则更新为auth!=null需集成Firebase认证，已在Angular13应用中成功实现，复制到Angular15应用时遇到类型错误。安装Angular Fire和Firebase模块后，在app.module.ts中添加import { AngularFirestoreModule } from '@angular/fire/compat/firestore';触发TypeScript错误，且无法将TypeScript降至4.7.4。

错误信息 #

ERROR

node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:18 - error TS2430: Interface 'DocumentSnapshotExists<T>' incorrectly extends interface 'DocumentSnapshot<DocumentData>'.
  The types returned by 'data(...)' are incompatible between these types.
    Type 'T' is not assignable to type 'DocumentData | undefined'.
      Type 'T' is not assignable to type 'DocumentData'.

13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot {
                    ~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:41
    13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot {
                                               ~
    This type parameter might need an `extends firebase.firestore.DocumentData` constraint.
  node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:41
    13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot {
                                               ~
    This type parameter might need an `extends firebase.firestore.DocumentData | undefined` constraint.


ERROR

node_modules/@angular/fire/compat/firestore/interfaces.d.ts:23:18 - error TS2430: Interface 'QueryDocumentSnapshot<T>' incorrectly extends interface 'QueryDocumentSnapshot<DocumentData>'.
  The types returned by 'data(...)' are incompatible between these types.
    Type 'T' is not assignable to type 'DocumentData'.

23 export interface QueryDocumentSnapshot<T> extends firebase.firestore.QueryDocumentSnapshot {
                    ~~~~~~~~~~~~~~~~~~~~~

  node_modules/@angular/fire/compat/firestore/interfaces.d.ts:23:40
    23 export interface QueryDocumentSnapshot<T> extends firebase.firestore.QueryDocumentSnapshot {
                                              ~
    This type parameter might need an `extends firebase.firestore.DocumentData` constraint.


ERROR

node_modules/@angular/fire/compat/firestore/interfaces.d.ts:26:18 - error TS2430: Interface 'QuerySnapshot<T>' incorrectly extends interface 'QuerySnapshot<DocumentData>'.
  Types of property 'docs' are incompatible.
    Type 'QueryDocumentSnapshot<T>[]' is not assignable to type 'QueryDocumentSnapshot<DocumentData>[]'.
      Type 'QueryDocumentSnapshot<T>' is not assignable to type 'QueryDocumentSnapshot<DocumentData>'.
        The types returned by 'data(...)' are incompatible between these types.
          Type 'T' is not assignable to type 'DocumentData'.

26 export interface QuerySnapshot<T> extends firebase.firestore.QuerySnapshot {
                    ~~~~~~~~~~~~~

  node_modules/@angular/fire/compat/firestore/interfaces.d.ts:26:32
    26 export interface QuerySnapshot<T> extends firebase.firestore.QuerySnapshot {
                                      ~
    This type parameter might need an `extends firebase.firestore.DocumentData` constraint.


ERROR

node_modules/@angular/fire/compat/firestore/interfaces.d.ts:29:18 - error TS2430: Interface 'DocumentChange<T>' incorrectly extends interface 'DocumentChange<DocumentData>'.
  The types returned by 'doc.data(...)' are incompatible between these types.
    Type 'T' is not assignable to type 'DocumentData'.

29 export interface DocumentChange<T> extends firebase.firestore.DocumentChange {
                    ~~~~~~~~~~~~~~

  node_modules/@angular/fire/compat/firestore/interfaces.d.ts:29:33
    29 export interface DocumentChange<T> extends firebase.firestore.DocumentChange {
                                       ~
    This type parameter might need an `extends firebase.firestore.DocumentData` constraint.

相关代码与配置 #

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { CircleComponent } from './circle/circle.component';
import { ChatComponent } from './chat/chat.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { ContactComponent } from './contact/contact.component';
import { AngularFireModule } from '@angular/fire/compat';
import { getApp, initializeApp, provideFirebaseApp } from '@angular/fire/app';
// import { AngularFirestoreModule } from '@angular/fire/compat/firestore';  THROWS THE ERROR
import { AngularFireAuthModule } from '@angular/fire/compat/auth'; 
import firebase from 'firebase/compat/app';

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    CircleComponent,
    ChatComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json #

{
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.1.0",
    "@angular/common": "^15.1.0",
    "@angular/compiler": "^15.1.0",
    "@angular/core": "^15.1.0",
    "@angular/fire": "^7.6.1",
    "firebase": "^9.22.2",
    "@angular/forms": "^15.1.0",
    "@angular/platform-browser": "^15.1.0",
    "@angular/platform-browser-dynamic": "^15.1.0",
    "@angular/router": "^15.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.1.4",
    "@angular/cli": "~15.1.4",
    "@angular/compiler-cli": "^15.1.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.9.4"
  }
}

ng version输出 #

Angular CLI: 15.1.6
Node: 18.14.0
Package Manager: npm 9.3.1
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.8
@angular-devkit/build-angular   15.2.8
@angular-devkit/core            15.2.8
@angular-devkit/schematics      15.1.6
@angular/cli                    15.1.6
@angular/fire                   7.6.1
@schematics/angular             15.1.6
rxjs                            7.8.1
typescript                      4.9.5

解决方案 #

方案1：升级Angular Fire版本（优先推荐） #

Angular Fire 7.6.x对Angular 15和TypeScript 4.9.x的兼容性存在缺陷，升级到**@angular/fire@7.7.0+**版本可直接修复类型约束问题：

npm install @angular/fire@latest

同步升级Firebase到匹配版本（7.7.x推荐搭配firebase@9.23.0+）：

npm install firebase@latest

方案2：添加TypeScript类型补丁（临时应急） #

若无法升级依赖，可通过声明补丁强制修正类型约束：

1. 在项目根目录创建patch-angular-fire-dts.ts文件：

declare module '@angular/fire/compat/firestore/interfaces' {
  import type { DocumentData } from 'firebase/firestore';

  export interface DocumentSnapshotExists<T extends DocumentData> extends firebase.firestore.DocumentSnapshot {}
  export interface QueryDocumentSnapshot<T extends DocumentData> extends firebase.firestore.QueryDocumentSnapshot {}
  export interface QuerySnapshot<T extends DocumentData> extends firebase.firestore.QuerySnapshot {}
  export interface DocumentChange<T extends DocumentData> extends firebase.firestore.DocumentChange {}
}

2. 在tsconfig.json的include数组中引入该文件：

{
  "include": [
    "src/**/*",
    "patch-angular-fire-dts.ts"
  ]
}

方案3：切换到Angular Fire模块化API（长期最优） #

Compat API是为兼容旧代码设计的，Angular 15更适配Firebase v9+的模块化API，彻底避免类型兼容问题：

1. 替换导入语句：

// 移除compat导入
// import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
// import { AngularFireAuthModule } from '@angular/fire/compat/auth';

// 使用模块化API
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';

2. 在AppModule中配置依赖：

@NgModule({
  declarations: [/* ...组件声明 */],
  imports: [
    /* ...其他模块 */
    provideFirebaseApp(() => initializeApp(yourFirebaseConfig)), // 替换为你的Firebase配置
  ],
  providers: [
    provideFirestore(() => getFirestore()),
    provideAuth(() => getAuth()),
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 组件中使用模块化API示例：

import { Firestore, collection, getDocs } from '@angular/fire/firestore';

constructor(private firestore: Firestore) {}

async fetchCollectionData() {
  const colRef = collection(this.firestore, 'your-collection-name');
  const snapshot = await getDocs(colRef);
  const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
  // 处理数据
}

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