非同期処理のデータ取得について

Question

困っていること

sample関数で、firestoreからデータを取得するときに、return doc.data()としているのにデータを取得できない原因を知りたいです。
合わせて、どうやったらデータを取得できるかご教示いただけると幸いです。

const sample = async () => {
  const db = firebase.firestore();
  const docRef = await db.collection('blog').doc('xxxx...')
  docRef.get().then(doc => {
    return doc.data()
  })
}

const Index: React.FC = () => {
 console.log(sample())
 //Promise {<pending>}が返ってきてしまう
}

Answer 1

Promise {<pending>}が返ってきてしまう

async を使って宣言された非同期関数は結果として Promise を返しますので、それは正常な動作です。thenメソッドを使うなどして、Promiseの処理が完了したときに時にその完了結果を受け取ってください。
非同期関数 - JavaScript | MDN

ただし今回のコードでは return doc.data() としているのは docRef.get().then(～) の関数内であり、sample非同期関数の完了結果は返されていません。よってthenメソッドを使っても何の完了結果も受け取れません。

結果を表示するにおそらく以下のようなコードが必要だと思います。

const sample = async () => {
  const db = firebase.firestore();
  const docRef = await db.collection('blog').doc('xxxx...')
  return await docRef.get().then(doc => { return doc.data() });
}

const Index: React.FC = () => {
  sample().then(result => {
    console.log(result);
  });
}

Answer 2

return doc.data()が戻しているのはdocRef.get()したときの
コールバック関数です。sampleの戻り値にはなっていません。
sampleはasyncしているのでpromiseを返します。

doc.data()を受け取りたいならpromiseでresolveしてみてはどうでしょうか？