导入 AngularFirestoreModule 时出现问题：“此类型参数可能需要 `extends firebase.firestore.DocumentData` 约束。”

Question

您好，我在将 Firebase (Firestore) 连接到我的 Angular 应用程序时遇到问题。这是我第一次尝试连接 Firebase，因此我遵循了 Google 的教程。\n https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase#10

\n

在第 11 步中，我必须导入 AngularFirestoreModule，我这样做了：

\n

import { NgModule } from \'@angular/core\';\nimport { BrowserModule } from \'@angular/platform-browser\';\n\nimport { AppRoutingModule } from \'./app-routing.module\';\nimport { AppComponent } from \'./app.component\';\nimport { MapComponent } from \'./map/map.component\';\nimport {BrowserAnimationsModule} from "@angular/platform-browser/animations";\nimport { NavbarComponent } from \'./navbar/navbar.component\';\nimport { CodeComponent } from \'./navbar/code/code.component\';\nimport { ManagerComponent } from \'./manager/manager.component\';\nimport { initializeApp,provideFirebaseApp } from \'@angular/fire/app\';\nimport { environment } from \'../environments/environment\';\nimport { provideFirestore,getFirestore } from \'@angular/fire/firestore\';\nimport {AngularFireModule} from "@angular/fire/compat";\nimport {AngularFirestoreModule} from "@angular/fire/compat/firestore";\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    MapComponent,\n    NavbarComponent,\n    CodeComponent,\n    ManagerComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    BrowserAnimationsModule,\n    provideFirebaseApp(() => initializeApp(environment.firebase)),\n    provideFirestore(() => getFirestore()),\n    AngularFireModule.initializeApp(environment.firebase),\n    AngularFirestoreModule\n  ],\n  providers: [\n    ManagerComponent,\n    CodeComponent\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n

\n

导入后我遇到了以下问题：

\n

Error: node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:18 - error TS2430: Interface \'DocumentSnapshotExists<T>\' incorrectly extends interface \'DocumentSnapshot<DocumentData>\'.\n  The types returned by \'data(...)\' are incompatible between these types.\n    Type \'T\' is not assignable to type \'DocumentData | undefined\'.\n      Type \'T\' is not assignable to type \'DocumentData\'.\n\n13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot {\n                    ~~~~~~~~~~~~~~~~~~~~~~\n\n  node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:41\n    13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot {\n                                               ~\n    This type parameter might need an `extends firebase.firestore.DocumentData` constraint.\n  node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:41\n    13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot {\n                                               ~\n    This type parameter might need an `extends firebase.firestore.DocumentData | undefined` constraint.\n\n\nError: node_modules/@angular/fire/compat/firestore/interfaces.d.ts:23:18 - error TS2430: Interface \'QueryDocumentSnapshot<T>\' incorrectly extends interface \'QueryDocumentSnapshot<DocumentData>\'.\n  The types returned by \'data(...)\' are incompatible between these types.\n    Type \'T\' is not assignable to type \'DocumentData\'.\n\n  node_modules/@angular/fire/compat/firestore/interfaces.d.ts:29:33\n    29 export interface DocumentChange<T> extends firebase.firestore.DocumentChange {\n                                       ~\n    This type parameter might need an `extends firebase.firestore.DocumentData` constraint.\n\n\n\n\n\xc3\x97 Failed to compile.\n\n

\n

我不知道如何解决我的问题，也不知道如何以其他方式连接我的 Firestore 数据库。\n感谢您的帮助！

\n

这也是我的 app.component.ts：

\n

import { Component } from \'@angular/core\';\nimport {AngularFirestore} from "@angular/fire/compat/firestore";\nimport {Observable} from "rxjs";\n\n@Component({\n  selector: \'app-root\',\n  templateUrl: \'./app.component.html\',\n  styleUrls: [\'./app.component.css\']\n})\nexport class AppComponent {\n  toMap:boolean = true;\n  items: Observable<any[]>;\n\n  constructor(firestore: AngularFirestore) {\n    this.items = firestore.collection(\'items\').valueChanges();\n  }\n\n  switchToMap(){\n    this.toMap = !this.toMap;\n  }\n}\n\n

\n

我尝试遵循 Google 的教程，但遇到了问题，该问题在上方字段中进行了描述。\n https://developers.google.com/codelabs/building-a-web-app-with-angular-and-火力基地#10

\n

Answer 1

您可以通过更改 tsconfig.json 文件并通过将以下行添加到 compilerOptions 来告诉编译器不要在外部库中进行严格的类型检查，从而使其变得更简单：

"skipLibCheck": true

Answer 2

我遇到了同样的问题，这个 Github 评论为我修复了它： https ://github.com/angular/angularfire/issues/3290#issuecomment-1323837275

在您的 中node_modules/@angular/fire/compat/firestore/interfaces.d.ts，将泛型 <T>添加到出现错误的接口末尾。

首先，从以下位置更新这一行：

export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot 

对此：

export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot<T> 

为他们所有人做这件事。