firebase 使用collectionData从fireStore检索数据时出错

mmvthczy 于 2023-10-22 发布在其他

关注(0)|答案(3)|浏览(139)

我有一个firestore数据库，它存储了一些数据，但是当我试图从中获取记录时遇到了问题。
我的代码应该给予用户的记录，但给出了错误：
错误FirebaseError：应为类型“Query”，但它是：一个自定义wh对象。
这是我的代码

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

这里是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"
  }
}

firebase

来源：https://stackoverflow.com/questions/77157369/error-when-retrieving-data-from-firestore-using-collectiondata

3条答案

按热度按时间

xyhw6mcr1#

以下是如何修改getDataFromFireStore方法以创建Firestore查询，然后使用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));
}

赞(0）回复(0）举报 2023-10-22

2eafrhcq2#

它使用getDoc()和getDocs()，而不是使用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())
  }
}

赞(0）回复(0）举报 2023-10-22

jgovgodb3#

你在使用Firestore方法和Angular Fire。
Angular Firestore

import { AngularFirestore } from '@angular/fire/firestore';

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

  constructor(private firestore: AngularFirestore) { }

  addToFireStore(data: any) {
    this.firestore.collection('users').add(data)
      .then(() => console.log('saved successfully'))
      .catch((error) => console.log(error));
  }

  getDataFromFireStore() {
    this.firestore.collection('users').valueChanges()
      .subscribe(val => console.log(val));
  }
}

ngModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AppComponent } from './app.component';

const firebaseConfig = {
  // your firebase config here
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

赞(0）回复(0）举报 2023-10-22

我来回答

firebase 使用collectionData从fireStore检索数据时出错

3条答案

相关问题

热门标签

最新问答