【firebase Auth & firebase store】ユーザーに関連づけられたデータベースをnode.jsで取得したい【Nuxt.js】

Question

nuxt.js + firebaseでアカウント認証のウェブアプリを製作中です。
ログインしているユーザーのuidを見てfirestoreの該当するデータを取得し、表示したいと考えています。
今回は主にjavascriptの「Promise」の戻り値についての初歩的な認識が調べてもわからず質問してみました。

環境はnuxt.jsです。

下記はindex.vue内のスクリプトの記述です。

export default {
  computed: {
    received: function() {

      var getUser = firebase.auth().onAuthStateChanged(user => {
        let getDoc = firebase.firestore().collection('users').doc(user.uid).get()
        .then(doc => {
          add = doc.data().add;
          return add // この値が欲しい
        })
        .catch(err => {
          return err
        });
      });

      return add; // ここで取得しないと反映されない

    }
  }
}

<template>には<p>{{received}}</p>としており、色々試してみたのですがgetUserを取るとそれ以下の関数のコードを引っ張ってきたりとなかなか意図したデータが取得できません。

Promiseと、関数がネスト化した時にどうやって値を返すのか今まで意識せずにやってきたのでこの辺の考え方がよくわからず、なのですが、ご教示いただければと思います。
根本的に違うかもしれませんので諸々意見お聞かせいただければと思います。

Answer 1

自己解決しました。

結構ハマっている人も多いと想うので解決策を記載しておく。

まず、この問題に対して必要な知識は「スコープ」の基本と「this」の仕様。

僕はもともとスコープに対してはなんとなーく理解はしていたので、関数の中の関数の中で取得した値を外で使うことが許されていないということも分かってはいた。
まずはコードを掲示する。

export default {
  name: 'foo',
  data() {
    return {
      foo: ''
    }
  },
      received: function() {
        let self = this
        var add = null

        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
            firebase.firestore().collection('users').doc(user.uid).get()
              .then(doc => {
                let add = doc.data().add;
                console.log("address is " + add);
                self.foo = add
              })
              .catch(err => {
                console.log(err);
                return err
              })
          } else {
            return false;
          }
          console.log("self.foo " + self.foo);
          return self.foo
        });
      }
  }
}

まず「foo」を宣言する。
試しにreceived: function()の中でthisを使いコンソールで確認すると何かといろんなオブジェクトを取得しており、多分コンポーネント？オブジェクトがthisに入っているっぽい。
そして、thisを別変数に入れて「this.foo」にfirestoreのデータが格納される。
<span>{{foo}}</span>などで取れる。
thisオブジェクトをどう利用するかがカギというか、Vueの使い方なのかな、という印象でした。
Nuxt.jsでfirebaseを使う人っていっぱいいると思うので、UIDに紐づいたデータを取得したい場合の参考になればいいと思う。
未だわからないところもあるので、watchを使うべきか「vue-async-computed」なるプラグインがあるみたいな話もあり、色々検証の余地がある。