nested promises problem

asyncawait.js

  async componentDidMount() {
    let results = [];
    let races = await firebase
      .firestore()
      .collection("races")
      .get();
    for (let race of races.docs) {
      let r = {};
      r.field = race.data().field;
      r.date = moment(race.data().date.seconds * 1000)
        .format("MMMM DD, YYYY")
        .toString();
      const name = await race.data().course.get();
      r.courseName = name.data().name;
      results.push(r);
    }
    this.setState({ races: results });
  }

racelistComponent.js

state = {
    // Example of the desired state (array of objects)
    races: [
      { field: "A", courseName: "Rush North", date: "09-01-2018" },
      { field: "B", courseName: "Rush North", date: "09-01-2018" }
    ]
  };

  componentDidMount() {
    let results = [];
    firebase
      .firestore()
      .collection("races")
      .get() // returns a promise which resolves to a collection of documents
      .then(collection => { // returns a collection of 'race' documents
        collection.forEach(race => {
          let r = {};
          r.field = race.data().field;
          r.date = race.data().date;
          const courseNameRef = race.data().course; // reference that has to be fetched
          courseNameRef.get().then(course => {
            r.courseName = course.data().name;
          });
          results.push(r);
        });
        this.setState({ races: results });
      });
  }

racelistComponent_v2.js

  state = {
    // Example of the desired state (array of objects)
    races: [
      { field: "A", courseName: "Rush North", date: "09-01-2018" },
      { field: "B", courseName: "Rush North", date: "09-01-2018" }
    ]
  };

  async componentDidMount() {
    let results = [];
    await firebase
      .firestore()
      .collection("races")
      .get() // returns a promise which resolves to a collection of documents
      .then(collection => {
        // returns a collection of 'race' documents
        collection.forEach(race => {
          let r = {};
          r.field = race.data().field;
          r.date = race.data().date;
          const courseNameRef = race.data().course; // reference that has to be fetched
          r.courseName = this.getCourseName(courseNameRef);
          results.push(r);
        });
      });
    this.setState({ races: results });
  }

  async getCourseName(ref) {
    await ref.get().then(course => {
      return course.data().name;
    });
  }