Issue with importing AngularFirestoreModule: "This type parameter might need an `extends firebase.firestore.DocumentData` constraint."

Question

Hi I have a problem with connecting Firebase (Firestore) to my Angular App. Thats the first time I am trying to connect firebase, so i followed a tutorial from Google. https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase#10

In step 11 I have to import AngularFirestoreModule, which I did:

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

After importing I got following issues:

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.

I dont know how to fix my problem or how I could connect my Firestore Database in another way. Thank you for helping!

Here also my 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;
  }
}

I tried to follow a tutorial from Google, but got the problem, which is descriped in the upper field. https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase#10

Kain

Answer 1

I had the same issue and this Github comment fixed it for me: https://github.com/angular/angularfire/issues/3290#issuecomment-1323837275

In your node_modules/@angular/fire/compat/firestore/interfaces.d.ts, add a generic <T> to the end of the interfaces where the errors are.

To start, update this line from this:

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

to this:

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

Do this for all of them.

Kropp

That fixed the error, hopefully I can now read and write in my Firestore Database, thank you ! – Kain

This did wonders, thank you! Just for convenience sake I wanted to mention patch-package to save this fix in your own project. – Rules

Answer 2

You can make it more simple by changing your tsconfig.json file and telling the compiler not to do strict type-checking in external libraries by adding the below line to the compilerOptions:

"skipLibCheck": true

Invention

Answer 3

The below worked in both Dev/Local and PROD

This post is lengthy, but if you want to get it working in your prod pipeline, it's worth the read.

To build on top of @aghwotu's answer, to help those who want to fix it for their prod environment where they might have a auto pipeline in place, follow the below steps:

I'm mostly talking to those who have a pipeline set up and can't really manually push your node_modules to prod. If you're looking to just do this in your dev environment or you can push your node_modules to you server, then @aghwotu's answer is your easiest and quickest solution.

Script Content

#!/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..."

In my case... (don't use the below, only read and understand it, then apply it to your pipeline in a way that works for you... unless you're using the same stack as I am).

I'm using github actions with firebase hosting.

So I created a firebase_broken.sh and placed it the .github/scripts folder. You probably wont have the scripts folder in the .github folder, so you can just create it.

Don't forget to add the above script to the firebase_broken.sh file - it'll be awkward if you forget that lol.

Then in my github actions files (both the pull request and merge .yml files) I added this:

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

Note: I added it right above my npm run build -- --configuration production

Pop me a question if it doesn't work. It worked for me so I'm sure we can get it to work for you.

In summary

All I did was take @aghwotu's answer and wrote a script for it to work on an automated release pipeline.

Good luck and may Firebase be kind to us all.

Here's a link to some other peeps who struggled with the same issue: Github Issue - Angular Firebase: interfaces.d.ts

Montana

This is exactly what I needed. I'm using Bitrise for my pipeline but the script still works for me. Thanks @Montana – Fm

Answer 4

Upgrade of @angular/fire to version 16 totally solves it "@angular/fire": "^16.0.0"

Merkley