firebase firestoreにおけるgetDocの使い方について

Question

やっていること・実現したいこと

Web開発初心者です。
React + Firebaseでアプリ開発の学習を行っています。
Cloud Firestoreに登録したデータを取得して扱いたいです。

環境

React…ver17.0.2
firebase…ver9.6.6
npm…ver8.1.2

躓いている点・分からない点

getDoc関数を用いた下記のコードにて、『選択』ボタンを押した際に
コンソール上にFirebaseからデータを取得しようとしておりますが、
空のオブジェクトしか返ってきません。

//firebase.js(設定ファイル)

import firebase from "firebase/compat/app";
import "firebase/compat/firestore";

//xxx～には固有の値を設定
const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxxx",
  projectId: "xxxxxxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxxxxxxx",
  appId: "xxxxxxxxxxxxxxxx",
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();

export default db;

//Test.jsx(firebaseからデータを取得するためのコンポーネント)

import { getDoc, doc } from "firebase/firestore";
import db from "../../config/firebase";

//usersコレクションより値を取得
const Test = () => {
  const onClickSelect = async () => {
    const docRef = doc(db, "users", "7hs6ApsWzOd6deqYGuNU");
    const docSnap = await getDoc(docRef);
    console.log(docSnap);
  };

  return (
    <div className="App">
      <button onClick={onClickSelect}>選択</button>
    </div>
  );
};

export default Test;

　

ちなみに、コンソール上では以下のように表示されます。

どうすれば空でないオブジェクトを返すことが出来るでしょうか。
また、空のオブジェクトを返している原因は何なのでしょうか。
調べてみても分かりませんでした。
どなたかご教示頂けませんでしょうか。どうかお願いいたします。

Answer 1

ドキュメントのデータを取得したい場合は、console.log(docSnap.data());のようにdata()メソッドを追加します。
https://firebase.google.com/docs/reference/node/firebase.firestore.DocumentSnapshot#constructor

DocumentSnapshotオブジェクト(コード上のdocSnap)をコンソールで表示した時に省略されてしまうのは、console.log(obj)では2階層以上ある場合にそれより深い階層を省略するということが関係していそうです。
オブジェクト全てを見たい場合はconsole.dir(obj);を活用してみてください。
https://developer.mozilla.org/ja/docs/Web/API/Console/dir

Comments

[oipoioipoi]

akarisano様、返信が遅れてしまい申し訳ございません。

data()メソッドで無事、ドキュメントのデータを取得することが出来ました！本当にありがとうございます！！
v9の記事等が少なく、かなり探したのですが詰まっていたので本当に助かりました。
公式リファレンスの日本語翻訳が微妙に読みづらく避けていたのですが、次からは逃げないようにします…。

console.dir()についても詳細なご説明、ありがとうございました！
オブジェクトの使い方やデバッグの手法等も分からないだらけなので、このような情報がとても嬉しいです！