嗨,我有一个问题,连接Firebase(FiRestore)到我的Angular 应用程序.这是我第一次try 连接Firebase,所以我遵循了谷歌的教程. https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase#10

在步骤11中,我必须导入AngularFirestore模块,我已经这样做了:

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;
  }
}

我试图遵循谷歌的一个教程,但遇到了问题,上面的字段中描述了这个问题. https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase#10

推荐答案

我也有同样的问题,Github的这条 comments 为我解决了这个问题: 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> 

为他们所有人这样做.

enter image description here

Angular相关问答推荐

to Signal on Observables inside Signal

RXJS运算符用于combineLatest,不含空值

对子router-outlet 应用主机样式

Ngrx Select 器返回部分对象

所有返回缺少权限或权限不足的FireBase项目.

如何将表单作为Angular 分量输入传递?

NG-Zorro Datepicker 手动输入掩码不起作用

当try 关闭浏览器选项卡时显示alert 时,我是否可以捕获用户是否取消警告

Angular 9表单构建器 - 日期验证器问题

Angular 测试被认为是成功的,即使有错误

使用 RxJS forkJoin 时传递参数的最佳方式

无法推送 Angular 项目 - Github

多个 Mat Paginator 在 Angular 组件中不起作用

将数组传递给 URLSearchParams,同时使用 http 调用获取请求

如何 use/import http模块?

如何在两个模块之间共享服务 - @NgModule 在Angular 而不是在组件之间?

Angular 2 - ngfor 没有包装在容器中

如何将一个组件放入Angular2中的另一个组件中?

如何防止角material垫菜单关闭?

如何在 Angular CLI 的构建时插入内部版本号或时间戳