Выполнение следующей задачи первым после завершения цикла forEach в Firebase

Question

У меня две задачи.Они должны получить значения из Firebase Firestore.Вот мой JavaScript:

if (doc.exists) {
            console.log("Document data:", doc.data());
            const data = doc.data();
            const members = data.members;
            var permission_table = document.getElementById("noten_tabelle_permission");
            var permission_table_container = document.getElementById("main_padding");

            members.forEach(el => {
              console.log(el)

              table_number++;

              const html = fillTemplate("grade_table" + table_number, doc.id);
              // Join the array of html and add it as the `innerHTML` of `main`
              document.getElementById("main_padding").insertAdjacentHTML('beforeend', html);

              db.collection("users").doc(el).collection("grades").get().then(function(querySnapshot) {
                querySnapshot.forEach(function(doc) {
                    console.log(doc.id, " => ", doc.data());
                    const data = doc.data();

                    addToTable("grade_table" + table_number, doc.id, data.mdl, data.klu);

                });
              });
            })

          } else {
            console.log("No such document!");
          }

Итак, во-первых, как вы можете видеть, я получаю "участников" из Firestore.Затем я создаю для каждого из них таблицу с другим идентификатором.Кстати.Вот функция "fillTemplate":

function fillTemplate({ table_name, id }) {
  return `
  <div class="noten_tabelle_permission" id="noten_tabelle_permission">
    <h1 id="member_name">${id}</h1>
    <table id="${table_name}" style="width:100%">
      <tr>
        <th>Fach</th>
        <th>mündlich</th>
        <th>Klausur</th>
      </tr>
      <!-- Make content with js code -->
    </table>
  </div>
  `;
}  

Итак, после присоединения таблицы к основному виду я ищу значения для каждого пользователя (=== или для каждой таблицы).Я добавляю их в таблицу, вызывая функцию «addToTable», вы можете увидеть здесь:

function addToTable(table_name, subject, mdl, klu) {

  var subject_name = getSubjectByNumber(subject);
  var short_subject = getSubjectShortByNumber(subject);

      var y = document.createElement([short_subject]);
      y.setAttribute("id", [short_subject]);
      document.getElementById([table_name]).appendChild(y);

      var y = document.createElement("TR");
      y.setAttribute("id", [short_subject]);

      var cE = document.createElement("TD");
      var tE = document.createTextNode([subject_name]);
      cE.appendChild(tE);
      y.appendChild(cE);

      var a = document.createElement("TD");
      var b = document.createTextNode([mdl]);
      a.appendChild(b);
      y.appendChild(a);

      var c = document.createElement("TD");
      var d = document.createTextNode([klu]);
      c.appendChild(d);
      y.appendChild(c);


      document.getElementById(table_name).appendChild(y);
}  

Но теперь я получаю эту ошибку: Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null в этой строке: document.getElementById([table_name]).appendChild(y);.Я думаю, что это потому, что Firebase является асинхронным.Но как это исправить?Как его кодировать, чтобы он строго получал значения для члена и начинал сначала, чем со следующего члена?

---

Идентификатором таблиц является строка "grade_table" и номер переменной table_number.Идентификатор необходим даже для второй задачи Firebase.Но поскольку первая задача Firebase загружается асинхронно, переменная var table_number мгновенно обновляется следующей строкой: table_number ++ ;.Поэтому следующее задание firebase имеет неверный идентификатор таблицы.

---

~ marcelo