Question 250987 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase – Error when retrieving data from fireStore using collectionData

I have this firestore db that stores some data, but I have a problem when I try to fetch records from it.

My code is supposed to give a record of users, but gives the error:

ERROR FirebaseError: Expected type ‘Query’, but it was: a custom wh object.

here is my code

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {

  constructor(private fs: Firestore) { }

  addToFireStore(data: any) {
    const collectionInstance = collection(this.fs, 'users')
    addDoc(collectionInstance, data).then(() => {
      console.log('saved successfully')
    }).catch((error) => console.log(error))
  }

  getDataFromFireStore() {
    const collectionInstance = collection(this.fs, 'users')
    collectionData(collectionInstance).subscribe(val => console.log(val))
  }
}

here is the package.json

{
  "private": true,
  "dependencies": {
     ...
    "@angular/fire": "7.6.1",
    "firebase": "^10.4.0",
    "rxfire": "6.0.4",
    "rxjs": "~7.5.0",
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.3",
    "@angular/cli": "^15.2.9",
    "@angular/compiler-cli": "^15.0.0",
    "typescript": "~4.8.2"
  }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It is working using getDoc(), and getDocs() instead of using collectionData() & docData()

    import { Component } from '@angular/core'
import { Firestore, addDoc, collection, doc, getDoc, getDocs } from '@angular/fire/firestore'


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private fs: Firestore) { }

  onFormSubmit() {
    console.log(this.userForm.value)
    this.addToFireStore(this.userForm.value)
  }

  addToFireStore(data: any) {
    const collectionInstance = collection(this.fs, 'users')
    addDoc(collectionInstance, data)
      .then(() => {
        console.log('saved successfully')
      })
      .catch((error) => console.log(error))
  }


  async getDataFromFirestore() {
    const collectionRef = collection(this.fs, 'users')
    try {
      const querySnapshot = await getDocs(collectionRef)
      querySnapshot.forEach((doc) => {
        console.log('Document ID: ', doc.id)
        console.log('Data: ', doc.data(), doc)
      })
    } catch (error) {
      console.error('Error fetching data: ', error)
    }
  }


  async getNoteById(id = 'id') {

    const docRef = doc(this.fs, `users/${id}`)
    const querySnapshot = await getDoc(docRef)
    console.log(querySnapshot.data())
  }
}

  2. 0

    Here’s how you can modify your getDataFromFireStore method to create a Firestore query and then use collectionData:

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

// ...

getDataFromFireStore() {
  const collectionInstance = collection(this.fs, 'users');
  const queryInstance = query(collectionInstance); // Create a Firestore query
  collectionData(queryInstance).subscribe(val => console.log(val));
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search