【Vue.js×Firestoreクエリ】コンパイル直後はクエリによるデータ取得が成功するが、ブラウザリロード後はクエリ実行しても返却値が空になる

Question

Vue.jsでFirestoreにデータ格納しています。
仮ですが、データ構造はこちらです。

// コレクション
users: {
  // ドキュメント
  "000": {
    // フィールド
    post_id:1
    category_id,1
  },

Create時に書きの関数を実行しています。

testMethod: async function() {
      const userRef = collection(db, 'users');
      const q = query(userRef, where('post_id', '==', "1"), where('category_id', '==', "1"));
      const Snapshot = await getDocs(q);

      Snapshot.forEach((doc) => {
        if(doc.exists()) {
          console.log(doc.id)
          console.log('データあるよ')
        } else {
          console.log('データないよ')
        }
      });
}

コンパイル直後は↑は、クエリオブジェクトが作成・実行され、条件にマッチしたドキュメントデータが返却されます。

ただ、そのあとにブラウザリロードや別タブでページを開くと、返却値がemptyになっています。

再度コンパイルすると、直後のみ正しく実行されます。

かなりつまっています...。

Answer 1

この手前で必要な情報を取得していて、そのpromiseが正しく実装できていないのが原因でした。
解決です。