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

Question

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

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

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import { NavbarComponent } from './navbar/navbar.component';
import { CodeComponent } from './navbar/code/code.component';
import { ManagerComponent } from './manager/manager.component';
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import {AngularFireModule} from "@angular/fire/compat";
import {AngularFirestoreModule} from "@angular/fire/compat/firestore";

@NgModule({
  declarations: [
    AppComponent,
    MapComponent,
    NavbarComponent,
    CodeComponent,
    ManagerComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
  ],
  providers: [
    ManagerComponent,
    CodeComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

导入后我遇到以下问题：

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'.

  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.




× Failed to compile.

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

这也是我的 app.component.ts：

import { Component } from '@angular/core';
import {AngularFirestore} from "@angular/fire/compat/firestore";
import {Observable} from "rxjs";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  toMap:boolean = true;
  items: Observable<any[]>;

  constructor(firestore: AngularFirestore) {
    this.items = firestore.collection('items').valueChanges();
  }

  switchToMap(){
    this.toMap = !this.toMap;
  }
}

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

Answer 1

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

"skipLibCheck": true

Answer 2

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

在您的

node_modules/@angular/fire/compat/firestore/interfaces.d.ts

中，将 generic

<T>

添加到出现错误的界面末尾。

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

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

对此：

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

为所有人都这样做。

Answer 3

以下内容适用于开发/本地和产品

这篇文章很长，但如果您想让它在您的产品管道中运行，那么值得一读。

要在 @aghwotu 的答案的基础上进行构建，以帮助那些想要在可能拥有自动管道的产品环境中修复它的人，请按照以下步骤操作：

我主要是在与那些设置了管道并且无法真正手动将node_modules推送到产品的人交谈。如果您只想在开发环境中执行此操作，或者可以将 node_modules 推送到服务器，那么 @aghwotu 的答案 是您最简单、最快的解决方案。

脚本内容

#!/bin/bash

sed -i -e 's/export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot {/export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot<T> {/g' 'node_modules/@angular/fire/compat/firestore/interfaces.d.ts'
sed -i -e 's/export interface QueryDocumentSnapshot<T> extends firebase.firestore.QueryDocumentSnapshot {/export interface QueryDocumentSnapshot<T> extends firebase.firestore.QueryDocumentSnapshot<T> {/g' 'node_modules/@angular/fire/compat/firestore/interfaces.d.ts'
sed -i -e 's/export interface QuerySnapshot<T> extends firebase.firestore.QuerySnapshot {/export interface QuerySnapshot<T> extends firebase.firestore.QuerySnapshot<T> {/g' 'node_modules/@angular/fire/compat/firestore/interfaces.d.ts'
sed -i -e 's/export interface DocumentChange<T> extends firebase.firestore.DocumentChange {/export interface DocumentChange<T> extends firebase.firestore.DocumentChange<T> {/g' 'node_modules/@angular/fire/compat/firestore/interfaces.d.ts'
echo "Story of our lives..."

就我而言...（不要使用下面的内容，只需阅读并理解它，然后以适合您的方式将其应用到您的管道...除非您使用与我相同的堆栈）。

我将

github actions

与

firebase hosting

一起使用。

所以我创建了一个

firebase_broken.sh

并将其放置在

.github/scripts

文件夹中。您可能在

scripts

文件夹中没有

.github

文件夹，因此您只需创建它即可。

不要忘记将上面的脚本添加到

firebase_broken.sh

文件中 - 如果你忘记了，那就很尴尬了，哈哈。

然后在我的 github 操作文件（拉取请求和合并 .yml 文件）中我添加了以下内容：

- name: Run build script
        run: ./.github/scripts/firebase_broken.sh
        shell: bash

注意：我将其添加到我的

npm run build -- --configuration production

上方

如果不起作用，请向我提问。它对我有用，所以我相信我们可以让它为您工作。

总结一下

我所做的就是接受 @aghwotu 的回答并编写了一个脚本，让它在自动发布管道上工作。

祝你好运，愿 Firebase 善待我们所有人。

这里是其他一些遇到同样问题的人的链接：Github Issue - Angular Firebase：interfaces.d.ts

Answer 4

将@angular/fire升级到版本16完全解决了这个问题 “@角度/火”：“^16.0.0”