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 [email protected]

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 [email protected] firebase.database.DataSnapshot has such method:

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

In [email protected] 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.

[gorden0929]

Same here Temporarily solution for me: Downgrade typescript to 4.7.4

[wojteko22]

The problem is solved with [email protected] firebase.database.DataSnapshot again has method:

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

instead of

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

as in [email protected]

[vpease]

Same error trying to use Firestore I am using
@angular/[email protected] [email protected] [email protected]

My workaround was to downgrade typescript to 4.7.4

[Haytham510]

Same issue with me I am using versions:

@angular/[email protected] [email protected] [email protected]

I cannot update these versions because I am working with a team and this error doesn't occur with any of them. What could be the problem with my local environment?

[kedevked]

I have "firebase": "^9.14.0", and the issue is still there

[mikkimichaelis]

Same issue

"@angular/core": "^15.0.0", "@angular/fire": "^7.5.0", "firebase": "^9.14.0", "typescript": "~4.8.4"

used the previously mentioned temp fix

"skipLibCheck": true -> tsconfig.json

It compiles but not sure if it works.

UPDATE I've given up. Rebuilding my app as a React Native app and having wonderful success. My recommendation, bite the bullet, learn react and throw this garbage angular fire in the trash. Then empty the trash.

[isNotOkay]

Same issue here with Angular 15, any updates on this?

[edarioq]

Same issue, using angular 15.0.0 - seems to be an issue with compatibility interfaces @angular/fire/compat/firestore/interfaces.d.ts.

This is momentarily fixed by changing the above file, replacing line numbers 15 and 24 to:

data(options?: SnapshotOptions): any;

[armaanbanoriya]

A Big stop for the project.

"@angular/core": "^15.0.0", "firebase": "^9.15.0", "@angular/fire": "^7.5.0", "typescript": "~4.8.2"

[SotoSen]

Same issue, using angular 15.0.0 - seems to be an issue with compatibility interfaces @angular/fire/compat/firestore/interfaces.d.ts.

This is momentarily fixed by changing the above file, replacing line numbers 15 and 24 to:

data(options?: SnapshotOptions): any;

This works, thank you. (angular 15, fire 7.5 & firebase 9.9.3)

(Downgraded to 9.9.3 to check if an older version worked. It didn't, but as far as I know, downgrading was OK with ng 14)

[cwaj400]

Same issue, using angular 15.0.0 - seems to be an issue with compatibility interfaces @angular/fire/compat/firestore/interfaces.d.ts.

This is momentarily fixed by changing the above file, replacing line numbers 15 and 24 to:

data(options?: SnapshotOptions): any;

Is it worth doing a PR for this? It resoled my issue too.

[potatoman009]

Angular 15 dosen't with any version of firebase, as a hack u can change "strict" to false in tsconfig.json file. Team please fix this

[Andrew3005]

Same issue, using angular 15.0.0 - seems to be an issue with compatibility interfaces @angular/fire/compat/firestore/interfaces.d.ts. This is momentarily fixed by changing the above file, replacing line numbers 15 and 24 to:

data(options?: SnapshotOptions): any;

Is it worth doing a PR for this? It resoled my issue too.

It works, but if I use firebase hosting, I get error due of this and I cant build project and deploy it only if to deploy it by hands

[Jbz797]

It works, but if I use firebase hosting, I get error due of this and I cant build project and deploy it only if to deploy it by hands

This is normal I think because Firebase will not take into account the modification you made locally. If the PR is merge then there will be no problem.

[tbenson89]

Newb here, I feel like i'm running in circles chasing my tail anyone got a production grade hack?

"@angular/core": "^15.0.0", "@angular/fire": "^7.5.0", "firebase": "^9.15.0", "typescript": "~4.8.4"

Sorry if my comment is stupid i'm dumb and don't really communicate very well in forums just read them usually but this is driving me bonkers. I have to get it working I really want this project to launch using firebase tools :)

[danielcornejo14]

Hi, if you are still having this problem maybe you can read this issue https://github.com/angular/angularfire/issues/3290, it solved the problem for me