我无法使用 firebase 从我的文档中获取我的数据

Question

我正在使用 firebase 防火墙作为数据库创建一个带有 javascript 的单页应用程序。 我已经设法将我所有的文件都列在我需要的地方。 每个文档都有一个指向详细信息页面的 href。 但是在详细信息页面上，我的文档中似乎没有任何数据。 我想从文档中调用标题以显示为 h1 但注意渲染并且我的控制台中没有任何错误..

谁能帮助我？

我的代码：这是获取所有文件（谁是事件）

// Get events

import firebase from 'firebase/app';
import 'firebase/firestore';

const Events = {
  getAll: async () => {
    // get firestore
    const db = firebase.firestore();

    // define query
    const query = db.collection('events');

    // query snapshot
    const querySnapshot = await query.get();

    // loop over all documents
    return querySnapshot.docs.map((doc) => (
      {
        ...doc.data(),
        id: doc.id,
      }
    ));
  },

  // get the data from a detailpage by the ID
  getById: async (id) => {
    const db = firebase.firestore();
    const event = await (await (db.collection('events').doc(id).get())).data();
    return event;
  },

};

export default Events;

我的组件将所有文档呈现为列表

import Component from '../lib/Component';
import Elements from '../lib/Elements';
import Router from '../Router';
import Events from '../lib/Events';

class EventsComponent extends Component {
  constructor() {
    super({
      name: 'events',
      model: {
        events: [],
      },
      routerPath: '/events',
    });
    this.eventsLoaded = false;
  }

  // Get the events one by one, make them an href to their detail page and show the name of the 
     event
  loadEvents() {
    if (!this.eventsLoaded) {
      Events.getAll().then((data) => {
        this.model.events = data.map((event) => ({
          href: `${Router.getRouter().link('/event')}/${event.id}`,
          textContent: event.title,
        }));
      });
      this.eventsLoaded = true;
    }
  }

  render() {
    const { events } = this.model;

    // create home container
    const eventsContainer = document.createElement('div');

    // Load events
    this.loadEvents();

    // Check if there are any events
    if (events.length === 0) {
      eventsContainer.innerHTML = 'There are no events planned at the moment';
    } else {
      eventsContainer.appendChild(
        Elements.createList({
          items: this.model.events,
        }),
      );
    }

    return eventsContainer;
  }
}

export default EventsComponent;

我的详情页

// Event Component

import Component from '../lib/Component';
import Elements from '../lib/Elements';
import Events from '../lib/Events';

class EventComponent extends Component {
  constructor() {
    super({
      name: 'event',
      model: {
        event: [],
      },
      routerPath: '/event/:id',
    });
    this.eventLoaded = false;
  }

  // Set the model loading to true when the id page is founded
  loadEvent(id) {
    if (!this.eventLoaded) {
      this.eventLoaded = true;
      Events.getById(id).then((data) => {
        this.model.event = data;
      });
    }
  }

  render() {
    const { event } = this.model;

    // create event overview container
    const eventContainer = document.createElement('div');

    // Check for existing events and return the events.
    // Create an h1 with the name of the event as title
    if (!event) {
      this.loadEvent(this.props.id);
    } else {
      eventContainer.appendChild(
        Elements.createHeader({
          textContent: event.title,
        }),
      );
      console.log(this.model.event);
    }
    return eventContainer;
  }
}

export default EventComponent;

Answer 1

您已在详细信息页面中将 model 设置为由 object 组成的数组。

constructor() {
    super({
      name: 'event',
      model: {
        event: [],
      },
      routerPath: '/event/:id',
    });
    this.eventLoaded = false;
  }

当您尝试访问您的事件时，您正在尝试从一个插入 object 的数组中获取 get.title。

 Elements.createHeader({
          textContent: event.title,
        }),

我会 map 按字段 { "field": 0, "field2": ""} 的事件字段，但您可能会找到一种方法使其不那么冗长