Cloud FireStoreでfor文でデータを取得したい

Question

前提・実現したいこと

目的はjavascriptでユーザー名をfirestoreから取得することです。
ただし、ユーザー名は変更できるようにしたいため、
[users(コレクション)]→[ユーザーid(ドキュメント)]→[ユーザー名(フィールド)]
という形でデータを格納しています。(下図参照)

ここで、ユーザーidによる乗客リスト(passenger_list)を作成します。そして、その要素ごとにユーザー名をfirestoreから取得したところ、正常に動作しました。

(例)乗客の数：2名

var passenger_list =["1番目のuid", "2番目のuid"];
for ( var i = 0,len = passenger_list.length; i < len; i++ ) {
  db.collection("users/").doc(passenger_list[i]).get().then(function(doc) {
  if (doc.exists) {
    passenger_name = doc.data().name;
    console.log(passenger_name);
  }
});
}
// 実行結果:
// "1番目のusername"
// "2番目のusername"

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

しかしながら、このプログラムをforループさせたところ、実行結果が以下のようになりました。

該当のソースコード

(例)ループ回数:2回　乗客の数：2名

for ( var j = 0; j < 2; j++ ) {//j:ループ回数
  var passenger_list =["1番目のuid", "2番目のuid"];
  for ( var i = 0,len = passenger_list.length; i < len; i++ ) {
    db.collection("users/").doc(passenger_list[i]).get().then(function(doc) {
    if (doc.exists) {
      passenger_name = doc.data().name;
      console.log(passenger_name);
    }
  });
  }
}
// 実行結果:
// "1番目のusername"
// "1番目のusername"
// "2番目のusername"
// "2番目のusername"

本来は
"1番目のusername"
"2番目のusername"
"1番目のusername"
"2番目のusername"
という風に動作させたいのですが、その方法が分からなかったため質問させていただきました。

試したこと

Consoleで検証したところ、if (doc.exists) {}が4回連続で実行されていました。即ち、ループ終了時にデータベースから一度にユーザー名が取得されていると考えられます。

また、jsのpromiseや、jQueryの.when.doneなども試しましたが、同様の結果となりました。(firestoreを使った途端に実行順序が変わってしまいます。)

つきましては、目標の動作を行う方法をご教授いただければ幸いです。
また、ユーザーidとユーザー名の構成をより簡潔にする方法などもありましたら教えていただきたいと思います。

当方初学者ですので、低レベルな質問だとは思いますが、よろしくお願いいたします。

Answer 1

Promiseを使って実現できるはずですね。
提示されたコードだと、ここの部分がPromiseで、

    db.collection("users/").doc(passenger_list[i]).get()

次の関数は上記のget()の結果が返り次第実行されるもので、完了を待たずに次のループを実行してしまいます。

  .then(function(doc) {
    if (doc.exists) {
      passenger_name = doc.data().name;
      console.log(passenger_name);
    }
  });

このままだとget()の結果次第で出力順が変わってしまいます、

順番通りに実行する実装の仕方はいろいろありますが、forをどうしても使いたいならasync functionを使うとか。
そうでなければPromise.all()が使えるように配列を作ればできると思います。

実行しないで書いたので間違えてるかもしれませんが、以下のような感じで書けたと思います。
async function使う方法

async function hoge() {
  for (let j = 0; j < 2; j++) {//j:ループ回数
    const passenger_list = ["1番目のuid", "2番目のuid"];
    for (let i = 0, len = passenger_list.length; i < len; i++ ) {
      const doc = await db.doc(`users/${passenger_list[i]}`).get(); // awaitなのでここで待つ
      if (doc && doc.exists) {
        console.log(doc.get("name"));
      }
    }
  }
}
hoge(); //非同期処理を実行

Promise.all使う方法

Promise.all(Array(2).map(() => {//2:ループ回数
  const promises = ["1番目のuid", "2番目のuid"].map((uid) => {
    return new Promise((resolve, reject) => {
      db.doc(`users/${uid}`)
        .get()
        .then((doc) => {
          if (doc.exists) {
            resolve(doc.get("name"));
          } else {
            reject();
          }
        })
        .catch((err) => {
          reject(err);
        });
    });
  });
  return Promise.all(promises);  
})).then((values) => {
  // ここの結果どうなるか忘れました。。
});

また、ユーザーidとユーザー名の構成をより簡潔にする方法などもありましたら教えていただきたいと思います。

質問に答えていて疑問だったのですが、passenger_listに持っているUIDはどこからとってきたのでしょうか。
collectionから取得しているならばその時にユーザー名も取得できる気がしました。