@angular/fire接口继承错误求助（Ionic Angular项目）

问题场景 #

创建新的Ionic/Angular项目并添加@angular/fire包后，运行ionic serve时出现TypeScript类型不兼容错误，具体错误信息如下：

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.

项目配置信息 #

Package.json #

"@angular/common": "^15.0.0",
"@angular/core": "^15.0.0",
"@angular/fire": "^7.5.0",
"@angular/forms": "^15.0.0",
"@angular/platform-browser": "^15.0.0",
"@angular/platform-browser-dynamic": "^15.0.0",
"@angular/router": "^15.0.0",
"@angular/service-worker": "^15.0.0",
"@capacitor/app": "4.1.1",
"@capacitor/core": "4.6.1",
"@capacitor/haptics": "4.1.0",
"@capacitor/keyboard": "4.1.0",
"@capacitor/status-bar": "4.1.1",
"@ionic/angular": "^6.1.9",
"@ionic/pwa-elements": "^3.1.1",
"ionicons": "^6.0.3",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"

Package-lock.json #

"node_modules/@angular/fire": {
  "version": "7.5.0",
  ...
  "dependencies": {
    "...
    "firebase": "^9.8.0",
    ...
  },

"node_modules/firebase": {
  "version": "9.15.0",
  "resolved": "https://registry.npmjs.org/firebase/-/firebase-9.15.0.tgz",
  ...
},  

app.module.ts #

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFireStorageModule,
    AngularFirestoreModule,
    AngularFireFunctionsModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule { }

解决思路 #

1. 对齐@angular/fire与Firebase的依赖版本 #

从lock文件可见，@angular/fire@7.5.0要求firebase@^9.8.0，但实际安装的是firebase@9.15.0，Firebase后续版本收紧了类型约束导致冲突：

• 卸载当前Firebase：npm uninstall firebase
• 安装指定兼容版本：npm install firebase@9.8.0

2. 升级@angular/fire到适配Angular 15的版本 #

@angular/fire@7.5.0对Angular 15的支持存在不足，建议升级到兼容的最新版本：

• 执行升级命令：npm install @angular/fire@latest

  注：7.6.x及以上版本对Angular 15的兼容性更好，升级后需确认版本匹配

3. 临时放宽TypeScript类型检查（应急方案） #

若上述方法暂时无法生效，可临时跳过第三方库类型检查：

• 在tsconfig.json的compilerOptions中添加：

  "skipLibCheck": true
  

  此方法能快速启动项目，但会忽略潜在类型问题，不建议长期使用。

4. 确认Firestore导入配置 #

当前app.module.ts的导入配置正确，若使用compat模式（兼容旧版API），确保业务代码中导入的是@angular/fire/compat/firestore而非新的模块化API。

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