Vue.js｜FirebaseのonAuthStateChangedを同期的に処理する

やりたいこと

• Vue.jsでFirebaseのonAuthStateChangedを同期的に処理する
• そのうえで、onAuthStateChangedで確認したuser_idを利用してFirestoreからデータ取得する条件値に設定する
• Firestoreから正しくデータを取得する

実装

methods:配下に関数を作る

getUserId: function() {
      return new Promise(resolve => {
        const auth = getAuth();
        onAuthStateChanged(auth, (user) => {
          this.uid = user.uid;
          console.log('1');
          resolve();
        });
      });
    }

methods:配下にFirestoreからデータを取得する関数を作り、getUserId関数を呼び出す

getFirestoreData: async function() {
      // user_id取得
      await this.getUserId();
      console.log('2');
      const cRef = collection(db, 'test');
      // 取得したuser_idをここで利用できる
      // Promiseにしないとthis.uidが空となり、クエリが正しく動作しない
      const q = query(cRef, where('post_id', '==', this.id), where('user_id', '==', this.uid));
      const Snapshot = await getDocs(q);

      Snapshot.forEach((doc) => {
        if(doc.exists()) {
          console.log('成功')
        } else {
          console.log('失敗')
        }
      });

出力

1
2
成功 or 失敗