skip to Main Content

I’m adding Firestore to an existing angular project but I have a TS error when trying to ad dit to the constructor with the documentation code:

import { Firestore, collectionData, collection } from '@angular/fire/firestore';

  constructor(db: Firestore) {
    const collection: any = collection(db, 'songs');
    this.songs$ = collectionData(collection);
  }

TS error: Block-scoped variable 'collection' used before its declaration.ts(2448)
Type 'Observable<DocumentData[]>' is missing the following properties from type '{ new (subscribe?: ((this: Observable<Song[]>, subscriber: Subscriber<Song[]>) => TeardownLogic) | undefined): Observable<Song[]>; prototype: Observable<...>; create: (...args: any[]) => any; }': prototype, create ts(2739)

The firestore version: "@angular/fire": "^7.4.1"
And the ts version: typescript": "~4.7.2"

I don’t understand how to get around this, and haven’t been able to fin any answers on this specific issue.

2

Answers


  1. Try adding this:

    import * as firebase from ‘firebase/app’;

    import ‘firebase/firestore’;

    Also check on:

    https://firebase.google.com/docs/firestore/manage-data/add-data

    Here is other link solution almost related:

    How to create (set) data to Firestore using AngularFire?

    Login or Signup to reply.
  2. Rename the collection variable to something else;

    import { Firestore, collectionData, collection } from '@angular/fire/firestore';
    
      constructor(db: Firestore) {
        const coll: any = collection(db, 'songs');
        this.songs$ = collectionData(coll);
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search