导入 AngularFireDatabaseModule 时出错

问题描述 投票：0回答：8

我正在尝试将 Angularfire 数据库模块添加到新的 Angular 项目中，但是当我添加以下行时：

import { AngularFireDatabaseModule } from '@angular/fire/compat/database';

我收到此错误：

Error: node_modules/@angular/fire/compat/database/interfaces.d.ts:47:18 - error TS2430: Interface 'DatabaseSnapshotExists<T>' incorrectly extends interface 'DataSnapshot'.
  Types of property 'forEach' are incompatible.
    Type '(action: (a: DatabaseSnapshot<T>) => boolean) => boolean' is not assignable to type '(action: (a: DataSnapshot & { key: string; }) => boolean | void) => boolean'.
      Types of parameters 'action' and 'action' are incompatible.
        Types of parameters 'a' and 'a' are incompatible.
          Type 'DatabaseSnapshot<T>' is not assignable to type 'DataSnapshot & { key: string; }'.
            Type 'DatabaseSnapshotExists<T>' is not assignable to type 'DataSnapshot & { key: string; }'.  
              Type 'DatabaseSnapshotExists<T>' is not assignable to type 'DataSnapshot'.
                Types of property 'forEach' are incompatible.
                  Type '(action: (a: DatabaseSnapshot<T>) => boolean) => boolean' is not assignable to type '(action: (a: DataSnapshot & { key: string; }) => boolean | void) => boolean'.
                    Types of parameters 'action' and 'action' are incompatible.
                      Types of parameters 'a' and 'a' are incompatible.
                        Type 'DatabaseSnapshot<T>' is not assignable to type 'DataSnapshot & { key: string; }'.
                          Type 'DatabaseSnapshotDoesNotExist<T>' is not assignable to type 'DataSnapshot & 
{ key: string; }'.
                            Type 'DatabaseSnapshotDoesNotExist<T>' is not assignable to type '{ key: string; }'.
                              Types of property 'key' are incompatible.
                                Type 'string | null' is not assignable to type 'string'.
                                  Type 'null' is not assignable to type 'string'.

47 export interface DatabaseSnapshotExists<T> extends firebase.database.DataSnapshot {
                    ~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@angular/fire/compat/database/interfaces.d.ts:52:18 - error TS2430: Interface 'DatabaseSnapshotDoesNotExist<T>' incorrectly extends interface 'DataSnapshot'.
  Types of property 'forEach' are incompatible.
    Type '(action: (a: DatabaseSnapshot<T>) => boolean) => boolean' is not assignable to type '(action: (a: DataSnapshot & { key: string; }) => boolean | void) => boolean'.
      Types of parameters 'action' and 'action' are incompatible.
        Types of parameters 'a' and 'a' are incompatible.
          Type 'DatabaseSnapshot<T>' is not assignable to type 'DataSnapshot & { key: string; }'.
            Type 'DatabaseSnapshotDoesNotExist<T>' is not assignable to type 'DataSnapshot & { key: string; }'.
              Type 'DatabaseSnapshotDoesNotExist<T>' is not assignable to type 'DataSnapshot'.
                Types of property 'forEach' are incompatible.
                  Type '(action: (a: DatabaseSnapshot<T>) => boolean) => boolean' is not assignable to type '(action: (a: DataSnapshot & { key: string; }) => boolean | void) => boolean'.
                    Types of parameters 'action' and 'action' are incompatible.
                      Types of parameters 'a' and 'a' are incompatible.
                        Type 'DatabaseSnapshot<T>' is not assignable to type 'DataSnapshot & { key: string; }'.
                          Type 'DatabaseSnapshotExists<T>' is not assignable to type 'DataSnapshot & { key: string; }'.
                            Type 'DatabaseSnapshotExists<T>' is not assignable to type '{ key: string; }'.
                              Types of property 'key' are incompatible.
                                Type 'string | null' is not assignable to type 'string'.
                                  Type 'null' is not assignable to type 'string'.

52 export interface DatabaseSnapshotDoesNotExist<T> extends firebase.database.DataSnapshot {

这是我完整的 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 { environment } from '../environments/environment';
import {AngularFireModule} from '@angular/fire/compat';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    BrowserAnimationsModule,
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我已经尝试删除并重新安装该软件包，但没有成功。 另外，我有一个较旧的项目，具有完全相同的代码行和相同版本的 Angular 和 Angular/Fire ("@Angular/core": "^14.0.0"， "@angular/fire": "^7.4.1") 可以工作，但我无法创建新的。

有什么想法吗？

angularfire
8个回答
3
投票

原因

此错误的原因是 [email protected] 中 firebase.database.DataSnapshot 的 

forEach()
签名发生变化。可能在你的旧项目中你有一个旧版本（你可以签入 package-lock.json 或你的 node_modules ），如果你在那里运行 
npm update --save
，就会出现错误。

这些是来自 @angular/fire 的接口：

export interface DatabaseSnapshotExists<T> extends firebase.database.DataSnapshot {
    exists(): true;
    val(): T;
    forEach(action: (a: DatabaseSnapshot<T>) => boolean): boolean;
}
export interface DatabaseSnapshotDoesNotExist<T> extends firebase.database.DataSnapshot {
    exists(): false;
    val(): null;
    forEach(action: (a: DatabaseSnapshot<T>) => boolean): boolean;
}

在[email protected] firebase.database.DataSnapshot中有这样的方法：

forEach(
  action: (
    a: firebase.database.DataSnapshot & { key: string }
  ) => boolean | void
): boolean;

在 [email protected] 中是：

forEach(
  action: (a: firebase.database.DataSnapshot) => boolean | void
): boolean;

解决方案

您可以显式安装 [email protected] 来消除此错误 (

npm install [email protected] --save --save-exact
)。但请记住在解决此问题后更新它：https://github.com/angular/angularfire/issues/3255

更新

[email protected] 解决了该问题。 

firebase.database.DataSnapshot
再次具有与 [email protected] 中相同的 
forEach
签名。因此，只需使用 [email protected] （或更新版本）或将其从 
package.json
中删除并使用 
@angular/fire
选取的版本。

3
投票

只需打开以下文件：

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

下面可以看到子类的返回值是错误的

改成这个

基本上你只需要在末尾添加

<T>
即可。

0
投票

我面临着同样的问题，所以我回到了版本@9.9.1之后问题已经解决，请输入以下代码来解决这个问题-

npm install [email protected] --save --save-exact

希望它有效。

0
投票

在使用 

npm update
更新大量 Node 模块（包括将 Firebase 9.9.4 更新到 Firebase 9.10.0）后，我收到了相同的错误消息。恢复到 Firebase 9.9.1 并没有解决问题。我将项目恢复到备份，并一一更新 Node 模块，检查 Angular 是否启动。罪魁祸首原来是 TypeScript，从 4.7.4 更新到了 4.8.3。继续使用 TypeScript 4.7.4 项目运行良好。

0
投票

我已经尝试了所有的选项，而 9.9.3 之前的版本和较新的版本也导致了同样的问题。

我尝试跳过 libCheck 并且成功了。

compilerOptions: { "skipLibCheck": true }

注意： 这显然不是最终解决方案，但在 Firebase 发布修复之前，我们可以使用此调整。

-1
投票

角度/火7.5.0火力9.16.0 打开生成错误的interfaces.d.ts文件 添加到行尾 

<T>

export interface QueryDocumentSnapshot<T> extends firebase.firestore.QueryDocumentSnapshot<T>
-1
投票

我用这段代码更改了interfaces.d.ts，然后我可以从firestore获取任何集合。

export interface DocumentSnapshotExists<DocumentData> extends firebase.firestore.DocumentSnapshot {
readonly exists: true;
data(options?: SnapshotOptions): any;

}

export interface DocumentSnapshotDoesNotExist extends firebase.firestore.DocumentSnapshot {
readonly exists: false;
data(options?: SnapshotOptions): undefined;
get(fieldPath: string | FieldPath, options?: SnapshotOptions): undefined;

}

export interface QueryDocumentSnapshot<DocumentData> extends firebase.firestore.QueryDocumentSnapshot {
data(options?: SnapshotOptions): any;

}

-1
投票

将 typescript 版本降级到“~4.7.2”或更低。

立即安装 npm。

npm i --force
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.