【Vue.js + Firebase v9 】Firestoreからデータ読み取ろうとしたら[object Object]になった件

閲覧ありがとうございます。来月からWebエンジニアとして実務デビューをするyouです。

元々はWordPressで書いていたんですが、カスタマイズが面倒臭いし、銭稼ぎするつもりもないのでZennに移行してきました。

それでは本体に入りたいと思います。

Vue.js + Firebase v9でチャットアプリ制作にチャレンジしていたときの話になります。
Firestoreからデータを読み取ろうとしたら[object Object]と表示された際に少々苦戦したので共有します。

公式ドキュメントを参考に下記ソースコードを書いてみたのですが、出力結果が[object Object]となってしまっています。

async function getData() {
  　const querySnapshot = await getDocs(collection(db, "chats"));
  　querySnapshot.forEach((doc) => {
      console.log(`${doc.id} => ${doc.data()}`);
  　});
} // 出力結果：ドキュメントID => [object Object]

この[object Object]、JavaScriptの学習をしていた頃にも見掛けた気がしましたが、すっかり忘れてしまったので再度調べてみました。

調べると色々な記事がヒットすると思いますが、簡潔に言語化するとString型はプリミティブ型に属すため、Object型と同時に出力すると簡略化（String型扱い）して表示されてしまうようです。

よって、JSON.stringifyメソッドを使用することで、Object型の中身をString型に変換することで出力出来るようにします。

async function getData() {
    const querySnapshot = await getDocs(collection(db, "chats"));
    querySnapshot.forEach((doc) => {
      console.log(`${doc.id} => ${JSON.stringify(doc.data())}`);
 　　});
} // 出力結果：ドキュメントID => {"指定したkey1":指定したvalue1,"指定したkey2":"指定したvalue2"}

これで万事解決です。もしどなたかのお役に立てたら幸いです。

Firebase V9の書き方も絶賛勉強中なので、ある程度慣れてきたら記事に纏めようと思っています。

それでは良いエンジニアライフを。