以下是如何修改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));
}

它使用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())
  }
}

你在使用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 { }