我无法在 angular 的 firestore 中获取单个文档

Question

我目前正在用 angular 和 firebase 做一个项目，问题是当我想在组件的 console.log 出现时获取单个文档时，我得到了 undefined .这是代码：

import { Injectable } from '@angular/core';
import {
  AngularFirestore,
  AngularFirestoreCollection,
  AngularFirestoreDocument,
} from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Product } from '../interfaces/Product';

@Injectable({
  providedIn: 'root',
})
export class ConexionService {
  private itemsCollection: AngularFirestoreCollection<Product>;
  private items: Observable<Product[]>;
    private itemDoc: AngularFirestoreDocument<Item>;

  constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<Product>('Products');
    this.items = this.itemsCollection.snapshotChanges().pipe(
      map((actions) =>
        actions.map((a) => {
          const data = a.payload.doc.data() as Product;
          const id = a.payload.doc.id;
          return { id, ...data };
        })
      )
    );
  }

  listItem() {
    return this.items;
  }

  getOne(id: string): any {
    this.afs
      .collection<Product>('Products')
      .doc(id)
      .ref.get()
      .then((doc) => {
        if (doc.exists) {
          console.log(doc.data());
          return doc.data();
        } else {
          return 'Doc does not exits';
        }
      })
      .catch((err) => {
        console.error(err);
      });
  }
}

这在组件中

constructor(private _service: ConexionService){
     console.log('from component-', this._service.getOne('data_1'));
}

这是控制台输出：

from component-undefined

我觉得问题是在firebase data opted之前调用了这个函数，但是我不知道怎么解决。

Answer 1

正如@DougStevenson 在评论中提到的那样，您的代码的问题是缺乏同步，因为您正在执行的 get() 是异步的，并且将 return 在 console.log() 之后在构造函数中执行，为了修复它，您将必须使用如下（未经测试）示例中的承诺：

getOne(id: string): any {
    return this.afs
               .collection<Product>('Products')
               .doc(id)
               .ref
               .get()
               .then((doc) => {
                   if (doc.exists) {
                       console.log(doc.data());
                       return doc.data();
                   } else {
                       return 'Doc does not exits';
                   }
                })
                .catch((err) => {
                   console.error(err);
                });
}

constructor(private _service: ConexionService){
    this._service.getOne('data_1').then(value => {
        console.log('from component-', value);
    });
}

所以，这里发生了什么？！ getOne() 方法中的 get().then() 表示承诺一旦实现就会发生什么，因此如果您在构造函数中调用 then() 之后使用它，它将等待包含在 getOne() 在同步执行 console.log、运行之前完成。

我无法在 angular 的 firestore 中获取单个文档

i can't get a single document in firestore in angular

firebase

typescript

angularfire2

angular

google-cloud-firestore