Interface 'DatabaseSnapshotExists<T>' incorrectly extends interface 'DataSnapshot'

[wojteko22]

Version info

Angular: 14.1.1

Firebase: 9.9.2

AngularFire: 7.4.1

Other (e.g. Ionic/Cordova, Node, browser, operating system):

How to reproduce these conditions

Failing test unit, Stackblitz demonstrating the problem
https://github.com/wojteko22/angular-fire-bug

Steps to set up and reproduce

1. Clone repo
2. npm install
3. ng serve

Sample data and security rules

Debug output

** Errors in the JavaScript console **

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 {
                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

** Output from firebase.database().enableLogging(true); **

** Screenshots **

Expected behavior

No error in console

Actual behavior

Error in console

Reason

The reason of this error is change of forEach() signature of firebase.database.DataSnapshot in firebase@9.9.2

These are interfaces from @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;
}

In firebase@9.9.2 firebase.database.DataSnapshot has such method:

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

In firebase@9.9.1 it was:

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

[iurydev]

I have the same problem today. Any news about it ? I went back to version 9.9.1 to resolve.

[Ahsanali012]

Still facing this issue

[michelcasilla]

Same here

[TroniPM]

Same here. Any ideas?

[jpb-sophia]

Firebase: 9.9.2

I solved the issue by modifying this file like this:

[my project path]\node_modules\@angular\fire\compat\database\interfaces.d.ts

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

Then, I was able to read/write to the Firebase "Realtime Database".

[SeafAbuFares]

Ty so much it worked for me

[TroniPM]

Firebase: 9.9.2

I solved the issue by modifying this file like this:

[my project path]\node_modules\@angular\fire\compat\database\interfaces.d.ts

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

Then, I was able to read/write to the Firebase "Realtime Database".

The problem about this is: I can't use that workaround in production because CI/CD pipeline. 😔

[Low-Hiss-Systems]

Any news on this? The workaround provided does work for me in development but like the user above I can't deploy it to production

Edit: The issue went away now with firebase 9.9.3

[orbanszlrd]

I had a similar issue, but only using the latest version of typescript (4.8.2) which is not officially supported by Angular for now.

[AlexRebula]

The only way I could make this work was by setting compilerOptions.strict (tsconfig.json) to "false". Does anyone have a better idea? I suppose it's a problem in the fire library itself and unless that is fixed in there, there is not much we can do?

[jlgarcia-vs]

The same error is happening in "node_modules/@angular/fire/compat/firestore/interfaces.d.ts" with latest version.

[NoxSensei]

Problem still occurs.
I've set skipLibcheck in the tsconfig.json to avoid checking libraries. But it's just a temporary hack to ignore errors.

"skipLibCheck": true

[hiredtocode]

I've run into this error and couldn't find the solution anywhere so I tried to fix it myself and I've managed to get rid of the errors but not sure if this will break firestore... Please check.

Since the error was saying that the "docs" was the problem, I commented it out for both of them:

export interface QuerySnapshot<T> extends firebase.firestore.QuerySnapshot {
    // readonly docs: QueryDocumentSnapshot<T>[];
}
export interface DocumentChange<T> extends firebase.firestore.DocumentChange<DocumentData> {
    // readonly doc: QueryDocumentSnapshot<T>;
}

and for line 13 and 22, I changed

 firebase.firestore.DocumentSnapshot 
to 
firebase.firestore.DocumentData 

instead for both of them and all errors went away.

Does anyone know if this is ok or not?

[hiredtocode]

Before doing these things my app wouldn't build but now it builds.