firebaseでUserNameを表示する方法

Question

前提・実現したいこと

firebaseでチャットを作成する為にuserNameをmessageの横に表示させたいです。
また、過去のmessageコードと送信するためのコードを分ける必要がない、簡単な方法がある場合は教えて頂きたいです。

発生している問題・エラーメッセージ

更新時に誤作動が起きてしまうので送信するコードと過去のmessageを表示するコードを別にしようと思います。
しかしuserNameを別のコレクションから取得する際にならんかの誤作動が出てしまい、上手く作動しない、または表示されない事に困っています。consoleを見てもエラーは出ていないので間違った取得をしているのかと思います。

該当のソースコード

const db = firebase.firestore();
  db.settings({
    timestampsInSnapshots: true
  });

  
  const collection = db.collection('chat');

  const auth = firebase.auth();
  let me = null;

  const message = document.getElementById('message');
  const form = document.querySelector('form');
  const messages = document.getElementById('messages');
  const page = document.getElementById('page');

auth.onAuthStateChanged(user => {

    if (user) {
      me = user;


      while (messages.firstChild) {
        messages.removeChild(messages.firstChild);
      }

      /*過去のmessageを表示させる*/
      collection.orderBy('created').get().then(snapshot => {
        snapshot.forEach(doc => {
         const uidData = doc.data().uid
         const res = db.collection('users').doc(uidData).get()
         const userName = res.data().userName;
        const myuid = user.uid
        const li = document.createElement('li')
        const d = doc.data()
                if ( d.uid != myuid) {
                  li.classList.add('your');
                  li.textContent = d.uid.substr(0, 4) + ':' + d.message;
                } else {
                  li.textContent = d.message + ':' + d.uid.substr(0, 4);
                }
                messages.appendChild(li);
        });
      },error => {});

      /*これから送信されるmessageのコード*/
      collection.orderBy('created').where('created','>=', new Date).onSnapshot(snapshot => {
        snapshot.docChanges().forEach(async change => {
          const myuid = user.uid
          const uidData = change.doc.data().uid
          const res = await db.collection('users').doc(uidData).get()
          if (change.type === 'added') {
             const li = document.createElement('li')
              const d = change.doc.data()
              if (res.exists) {
                const userName = res.data().userName;
                if ( d.uid != myuid) {
                  li.classList.add('your');
                  li.textContent = userName + ':' + d.message;
                } else {
                  li.textContent = d.message + ':' + userName;
                }
                messages.appendChild(li);
                console.log(d.message);
              }
              console.log(li);
              console.log(d);
            }
          console.log(res);
        });
      },error => {});
    }
  });

  form.addEventListener('submit', e => {
    e.preventDefault();

    const val = message.value.trim();
    if (val === "") {
      return;
    }

    message.value = '';
    message.focus();

      collection.add({
        message: val,
        created: firebase.firestore.FieldValue.serverTimestamp(),
        uid: me ? me.uid : 'nobody'
      })
      .then(doc => {
        console.log(`${doc.id} added!`);
      })
      .catch(error => {
        console.log('document add error!');
        console.log(error);
    });
  });

試したこと

以上の”過去のmessageを表示するコード”のようにuserNameを使わずにuidのみで表示させようとすると問題なく表示されます。

補足情報（FW/ツールのバージョンなど）

firestoreのデータ詳細

users {
comment: "Hello"
userName: "太郎"
}

chat {
created: "Y-M-D"
message: "Hola"
uid: "oei183OIj320UdO"
}

Comments

[hoshi-takanori]

const res = db.collection('users').doc(uidData).get() が非同期だからですね…。

[tenten0114]

hoshi-takanoriさんならどのように変更されますか？差し支えなかければよろしくお願いします。

[hoshi-takanori]

とりあえず仮の名前を表示しといて、非同期で名前を取得したら表示を更新する、というのを Android では書いたことがありますが、JS では書いたことないです。
JS でもたぶん同様のロジックでいけると思いますが、DOM を直接いじって表示を更新する処理は書きたくないです。(ので、React を使うと思います。)

[tenten0114]

わかりました。ありがとうございます。Reactで最初からやります。