Cloud Firestoreからのデータ取得方法

Question

Vue.jsとFirebaseでチャットアプリを制作しております。

FirebaseのCloud Functionsを使用し、トークルームに新しいメッセージを投稿するとメールに通知を送れるようにしたいです。

受信者のメールアドレスをCloud Firestoreから取得してきたいのですが、以下のコードの一番下の部分で上手く取得できておりません。

何が原因でしょうか？初歩的な質問かもしれませんが、お力を貸して頂けると助かります。

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);
const db = admin.firestore()

const nodemailer = require("nodemailer");
const gmailEmail = functions.config().gmail.email
const gmailPassword = functions.config().gmail.password
const mailTransport = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: gmailEmail,
        pass: gmailPassword
    }
})

// トークルームに変更があればメールで通知
  exports.sendNotification = functions.firestore
    .document('talkrooms/{roomId}').onUpdate((change) => {

      const room = change.after.data();
      const chat = room.chat;

      if(chat.length !== 0){

        const newMessage = chat[chat.length-1];

        //送信者と受信者のIDを取得
        var sendUserID = newMessage.person;
        var receiveUserId;
        if(room.member[0].id == sendUserID){
          receiveUserId = room.member[1].id;
        }else{
          receiveUserId = room.member[0].id;        
        }

        //受信者のデータを取得
        var receiversData;
        db.collection('users').doc(receiveUserId).get()
          .then((doc)=>{
            if (doc.exists) {
              console.log("Document data:", doc.data()); //ここでは正常に表示されます。
       　　　　receiversData = doc.data();
            } 
          }).catch(function(error) {
            console.log("Error getting document:", error);
          });

        console.log(receiversData); //ここではデータが表示されません。
      
.
.
.

Comments

[xenbeat]

タグ「Vue.js」は今回の質問に全く関係ないので「JavaScript」や「Node.js」を代わりに追加ください。

[Khy]

ご指摘ありがとうございます。タグを修正致しました。

Answer 1

以下のコードの一番下の部分で上手く取得できておりません。何が原因でしょうか？

.thenの中のreceiversData = doc.data();は非同期で処理されるので、
一番下のconsole.log(receiversData);が先に呼び出されてreceiversDataがundefinedになっているのが原因でしょう。

var receiversDataを使う必要はないですが、既存コードを極力流用するなら「//※追加」の行を加えれば上手くいくと思います。

var receiversData;
db.collection('users').doc(receiveUserId).get()
  .then((doc) => {
    if (doc.exists) {
      console.log("Document data:", doc.data()); //ここでは正常に表示されます。
      receiversData = doc.data();
    }
  }).then(() => { //※追加
    console.log(receiversData); //※追加
  }).catch(function (error) {
    console.log("Error getting document:", error);
  });

Comments

[Khy]

ご回答ありがとうございます。
無事解決いたしました。
Promiseや非同期処理に関してまだまだ理解不足なので、もっと理解を深めていけるよう頑張ります。
ご丁寧にありがとうございました！

[xenbeat]

解決できてよかったですー

> Promiseや非同期処理に関してまだまだ理解不足なので、もっと理解を深めていけるよう頑張ります。

そうですね！そちらがある程度理解できるようになりましたら、async/await 構文での実装をオススメいたします。

※async/await 構文を使うには、Node.jsのバージョンを8以上にする必要がありますのでご留意ください。
https://firebase.google.com/docs/functions/manage-functions#set_nodejs_version