Question

我正在编写一个使用Firebase作为数据存储的React应用程序，我正在努力集成TypeScript。我很好奇如何定义Firebase中使用的数据结构，因此TypeScript将允许我提取数据。

Firebase后端存储一个首字母缩写词列表，其中包含此界面中定义的一些信息

interface Acronym {
  id: string;
  short: string;
  full: string;
  description: string;
  category: string;
}

我有一个组件可以在componentDidMount生命周期方法中获取Firebase数据，然后将响应推送到存储状态，该状态是Acronym类型的数组。

componentDidMount() {
  db
    .collection('acronyms')
    .onSnapshot(querySnapshot => {
      const acronyms: Acronym[] = [];

      querySnapshot.forEach(doc => {
        acronyms.push(doc.data());
      });

      this.props.updateState({acronyms});
    });
}

TypeScript在acronyms.push(doc.data());上抛出错误，因为doc.data（）没有定义的返回类型Acronym。如何告诉TypeScript doc.data()将返回Acronym类型？

Answer 1

可能正在发生，正如错误所述，doc.data（）没有定义的返回类型的缩写。可能是doc.data（）有另一个属性，而你的Acronym界面中没有它。

您可以尝试这样的事情：

querySnapshot.forEach(doc => {
  acronyms.push({id: doc.data().id, short: doc.data().short, full: doc.data().full, description: doc.data().description, category: doc.data().category});
});

通过这种方式，您将完全插入具有相同接口属性的对象。

我希望它真的能帮到你!!

使用TypeScript定义firebase数据结构

1 个答案: