使用 TypeScript 定义 firebase 数据结构答案

【问题标题】：Define firebase data structure with TypeScript使用 TypeScript 定义 firebase 数据结构
【发布时间】：2018-09-10 10:05:48
【问题描述】：

我正在编写一个使用 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 类型？

【问题讨论】：

标签： reactjs typescript firebase google-cloud-firestore

【解决方案1】：

它可能正在发生，正如错误所说，doc.data() 没有定义的 Acronym 返回类型。可能是 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});
});

这样，您将插入一个与其接口属性完全相同的对象。

希望对你有帮助！！

【讨论】：