您的渲染逻辑需要考虑到 Firebase 的异步查询。考虑使用您的组件state来解决此问题，方法是对您的代码进行以下调整：

getMyStory() { /* Remove arrow function */

    const db = firebase.firestore();
    db.settings({ timestampsInSnapshots: true});
    db.collection('story').get().then((snapshot) => {

      snapshot.docs.forEach(doc => {
          let items = doc.data();

          /* Make data suitable for rendering */
          items = JSON.stringify(items);

          /* Update the components state with query result */
          this.setState({ items : items }) 
      });

    });
}

接下来，添加componentDidMount()到您的组件中，然后getMyStory()像这样添加调用：

componentDidMount() {

    /* Cause your component to request data from Firebase when
       component first mounted */
    this.getMyStory()
}

最后，更新您的渲染方法以使用状态，而不是方法：

  render () {

    return (<p>{ this.state.items || 'Loading' }</p>);
 }

希望这可以帮助！

这里的主要问题是您正在尝试同步呈现异步数据，这与 react (至少目前还没有) 无关。

渲染异步数据时，您通常会利用组件状态。

下面是加载和呈现异步内容时的标准使用模式。

class YourComponent extends Component {
  state = {
    items: []
  }

  // This method is called when the component mounts
  // Usually  a good place to do async requests
  componentDidMount() {

    db.collection('story').get().then(snapshot => {
      // After promise is finished set data to local state
      // When setting state the render method will be called, thus rerendering the UI
      this.setState({ items: snapshot })
    })
  }

  render() {
    // Access your items from local component state
    const { items } = this.state;

    return (
      <div>
        {items.forEach(doc => {
          // Render whatever data is in your document
          return <p key={doc.id}> { Your data goes here }</p>
        })
        }
      </div>
    )
  }
}

Promise 对象表示异步操作的最终完成（或失败）及其结果值

根据您的代码返回 this.items; 先执行再解析db.collection('story').get()，最后一直得不到结果。

基本上这一行：

db.collection('story').get()

这是一个Promise，那么你必须等待解决结果，下面的代码：

getMyStory = () => {
    const db = firebase.firestore();

    db.settings({ timestampsInSnapshots: true});

    return db.collection('story').get()
}

阅读有关Promise的更多信息

========================编辑========================

getMyStory().then((snapshot) => {
    const listItems = snapshot.map((element) =>
      <li>{element}</li>
    );

    ReactDOM.render(
      <ul>{listItems}</ul>,
      document.getElementById('root')
    );
});

阅读更多关于地图

import React, { Component } from "react";
import firebase from "../config";

class App extends Component {
  constructor(props) {
    super(props);

    // Reference firebase in this.state, creating a global key-value pair
    this.state = {
      roomsRef: firebase.firestore().collection("rooms"),
      rooms: []
    };
  }

  // Retrieve data from firebase and set state
  getDb(db) {
    db.get().then(querySnapshot => {
      querySnapshot.forEach(doc => {
        let room = doc.data();
        room.key = doc.id;
        this.setState({
          rooms: this.state.rooms.concat(room)
        });
      });
    });
  }

  // 
  componentDidMount() {
    this.getDb(this.state.roomsRef);
  }

  render() {
    const rooms = this.state.rooms.map((r, i) => <li key={i}>{r.name}</li>);

    return (
      <div className="App">
        <section className="room-list">
          {this.state.rooms.length === 0 ? (
            <p>loading...</p>
          ) : (
            <ul>{rooms}</ul>
          )}
        </section>
      </div>
    );
  }
}

export default App;