Firestore のデータの読み込みがうまくいかない

Question

猫の足跡というサイトをもとに開発をしています。
下記のコードでfirestoreのデータの読み込みができるはずですが、うまくいきません。なぜでしょうか。

<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-firestore.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    measurementId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

var db = firebase.firestore();
db.collection("users").get().then((query) => {
  var buff = [];
  query.forEach((doc) => {
    var data = doc.data();
    buff.push([doc.id, data.name, data.age]);
  });
  console.log(buff);
})
.catch((error)=>{
  console.log(`データの取得に失敗しました (${error})`);
});

上記のコードをCodepenで試しました。Configはすべて非公開ですが、もし必要であれば開示します。

Comments

[mistn]

どううまくいかないのか詳しく書いてください。
エラーはでているのですか？

Answer 1

ブログをご覧いただきありがとうございます。
気になるところを列挙いたします。

1. バージョン違いのfirebase-app.jsが複数読み込まれていますが、どれかに統一してみてください
2. 読み込みが上手く行かないとありますが、Firestore上のデータはどのようになっていますか？
3. Firestoreのセキュリティルールはどのように設定されていますか？

Firebaseの管理画面からFirestoreのデータが表示されているスクリーンショットなどを共有ください。

1. 具体的にどううまくいかないのか教えてください。ブラウザのConsoleなどでエラーが確認できる場合は、エラーメッセージをそのまま貼り付けてください。

追加で情報をいただければ、何かしら回答できるかもしれません。