エラーコード：created hook: "TypeError: Cannot read property 'uid' of null"を解決したい

Question

created hook: "TypeError: Cannot read property 'uid' of null"

作成されたフック： "TypeError：nullのプロパティ 'uid'を読み取れません"とエラーが出てしまい、bookmark.vueへページ遷移した場合、上記画像のように「this.currentUserBookmarkList」内のデータが取得できておりますが、なぜかリロードするとデータが反映されなくなってしまいます。

原因は以下「currentUser.uid」を取得しているのですが、リロードしてしまうと「currentUser.uid」が取得する前にcreated()内を処理してしまうのか「currentUser.uid」を取得できないようです。

    const currentUser = firebase.auth().currentUser;
    const uid = currentUser.uid;

####試したこと

created()内で宣言しているのが原因かと思い、mounted()内で宣言し「firebase.auth().onAuthStateChanged」内でコードを記述し試してみましたが以下のエラーが出ます・・

Uncaught (in promise) TypeError: Cannot read property 'push' of undefined

Uncaught（in promise）TypeError：undefinedのプロパティ 'push'を読み取ることができません

mounted() {
    firebase.auth().onAuthStateChanged(function(currentUser) {
        if (currentUser) {
          const currentUser = firebase.auth().currentUser;
          const uid = currentUser.uid;

          firebase
            .firestore()
            .collection("users")
            .doc(uid)
            .collection("bookmarks")
            .orderBy("time", "desc")
            .get()
            .then(snapshot => {
              snapshot.forEach(doc => {
                this.currentUserBookmarkList.push(doc.data());
                // console.log(this.currentUserBookmarkList);
              });
            });
        }
      });
    }

原因分かる方いらっしゃいましたらお力添えを頂きたいです。

もし他に解決方法があればご教示頂けると幸いです。

よろしくお願いいたします。

#bookmark.vue(親コンポーネント)

<template>
  <div>
    <Header />
    <div class="bookmarkList flex">
      <h3 class="bookmarkList-title flex">{{ profileData.name }} さんのブックマーク一覧</h3>
      <hr class="separate" />
      <div class="bookmarkList-posts">
        <paginate
          name="paginate-bookmarkList"
          class="paginate-pctb"
          tag="ol"
          :list="bookmarkList"
          :per="12"
          v-if="bookmarkList.length !== 0"
        >
          <List
            v-for="(list) in paginated('paginate-bookmarkList')"
            :list="list"
            :bookmark="currentUserBookmarkList"
            :key="list.id"
          />
        </paginate>

        <div v-else class="nothing flex">ブックマークされた投稿はありません</div>
        <paginate-links
          for="paginate-bookmarkList"
          name="paginate-bookmarkList"
          :async="true"
          class="pagination paginate-pctb flex"
          :show-step-links="true"
          :style="bookmarkList == '' ? 'display:none;' : 'display:flex;'"
        ></paginate-links>
      </div>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      profileData: {},
      paginate: ["paginate-bookmarkList"],
      bookmarkList: [],
      currentUserBookmarkList: [],
      uid: null
    };
  },
  components: {
    Header,
    List
  },

  created() {
    firebase
      .firestore()
      .collection("users")
      .doc(this.$route.params.uid)
      .get()
      .then(snapshot => {
        this.profileData = snapshot.data();
      });

    firebase
      .firestore()
      .collection("users")
      .doc(this.$route.params.uid)
      .collection("bookmarks")
      .orderBy("time", "desc")
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          this.bookmarkList.push(doc.data());
        });
      });

    const currentUser = firebase.auth().currentUser;
    const uid = currentUser.uid;

    firebase
      .firestore()
      .collection("users")
      .doc(uid)
      .collection("bookmarks")
      .orderBy("time", "desc")
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          this.currentUserBookmarkList.push(doc.data());
          // console.log(this.currentUserBookmarkList);
        });
      });
  }
};

#list.vue(子コンポーネント)

<template>
  <div class="list">
    <div class="face face1 flex">
      <div class="content">
        <img
          class="profile-icon"
          width="50"
          height="50"
          :src="
            returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
          "
        />
        <h3>{{ list.title }}</h3>
        {{bookmark}}
      </div>
    </div>
    <div class="face face2 flex">
      <div class="content flex">
        <button class="hide-btn" @click="deletePost">×</button>
        <p>{{ list.description }}</p>
        <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link>
        <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
        <img
          src="../assets/ブックマーク保存.jpg"
          alt="ブックマーク"
          class="bookmark-icon"
          @click="saveBookmark"

        />
        <img
          src="../assets/ブックマーク未保存.jpg"
          alt="ブックマーク"
          class="bookmark-icon"
          @click="deleteBookmark"

        />
        <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
      </div>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      bookmarkId: "",
      userDatas: [],
      preview: require("../assets/デフォルト画像.jpg")
    };
  },
  props: {
    list: {
      type: Object
    },
    index: {
      type: Number
    },
    bookmark: {
      type: Array
    }
  },

  created() {
    firebase
      .firestore()
      .collection("users")
      .get()
      .then(snapshot => {
        snapshot.forEach(doc => {
          this.userDatas.push(JSON.parse(JSON.stringify(doc.data())));
        });
      });
  },

  methods: {

     ~ 省略 ~

    hasBookmark(book) {
      // ブックマークリスト内にbook idがあればtrue それ以外はfalse
      return this.bookmark.some(value => value.id === book.id);
    },

    saveBookmark() {
      const ref = firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc();

      const id = ref.id;

      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc(id)
        .set({
          bookmarkId: id,
          ...this.list,
          time: firebase.firestore.FieldValue.serverTimestamp()
        })
        .then(() => {
          this.$swal("ブックマークに追加しました。", {
            icon: "success"
          });
        })
        .catch(() => {
          this.$swal("ブックマークを追加出来ません。", {
            icon: "error"
          });
        });
    },

    deleteBookmark() {
      firebase
        .firestore()
        .collection("users")
        .doc(this.$route.params.uid)
        .collection("bookmarks")
        .doc(this.list.bookmarkId)
        .delete()
        .then(() => {
          this.$swal("ブックマークを取り消ししました。", {
            icon: "success"
          });
          this.$router.go({
            path: `/bookmark/${this.$route.params.uid}`,
            force: true
          });
        })
        .catch(() => {
          this.$swal("ブックマークを取り消し出来ません。", {
            icon: "error"
          });
        });
    },
  }
};
</script>

Answer 1

bookmark.vueでは以下のようにして、main.jsにて認証状態の永続性を設定をすると解決しました。

#bookmark.vue

    firebase.auth().onAuthStateChanged(user => {
      const uid = user.uid;

      firebase
        .firestore()
        .collection("users")
        .doc(uid)
        .collection("bookmarks")
        .orderBy("time", "desc")
        .get()
        .then(snapshot => {
          snapshot.forEach(doc => {
            this.currentUserBookmarkList.push(doc.data());
          });
        });
    });
  }

#main.js

if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: "key",
    authDomain: "key",
    projectId: "key",
    storageBucket: "key",
    messagingSenderId: "key",
    appId: "key",
    measurementId: "key",
  });
  firebase
    .auth()
    .setPersistence(firebase.auth.Auth.Persistence.SESSION)
    .then(() => {});
}