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

Question

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

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'uid' of null"

found in

---> <SignOut> at src/components/header.vue
       <Main> at src/views/main.vue
         <App> at src/App.vue
           <Root>

作成されたフックのエラー： "TypeError：nullのプロパティ 'uid'を読み取れません"

というエラーが見た目は正常なのに出ている状況です。
原因がわからず困っています・・

わかる方お力添えをいただけませんでしょうか。

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

#header.vue

export default {
  name: "signOut",
  data() {
    return {
      authenticatedUser: ""
    };
  },
  methods: {
    signOut() {
      firebase
        .auth()
        .signOut()
        .then(() => {
          this.$router.push("/signin");
        })
        .catch(() => {
          this.$swal("ログアウト出来ませんでした。", {
            icon: "error"
          });
        });
    }
  },
  created() {
    const currentUser = firebase.auth().currentUser;
    this.uid = currentUser.uid;

    firebase
      .firestore()
      .collection("users")
      .doc(currentUser.uid)
      .get();
  },
  mounted() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.authenticatedUser = true;
      } else {
        this.authenticatedUser = false;
      }
    });
  }
};
</script>

#追記

調べているとログイン処理が終わる前に、変数の中身を確認しようとしているため
エラーになっているのかと思い、以下記事を参考にしましたがいまだ解消されない状況です。。

Firebase Auth の初期化を待って currentUser を確実に存在チェックする方法

Comments

[hoshi-takanori]

参考にした記事に書いてある通り、非同期処理にすればいいと思います。

[TMTN]

ご回答いただきありがとうございます。
記事を参考にして以下のように記述しているのですが、
現状改善されない状況です・・

-------------------------------------------------------------------------------------
mounted() {
firebase.auth().onAuthStateChanged(user => {
if (user) {
this.authenticatedUser = true;
} else {
this.authenticatedUser = false;
}
});
}
-------------------------------------------------------------------------------------

[hoshi-takanori]

header.vue の create で currentUser.uid; にアクセスしてるのが問題で、これを onAuthStateChanged の中で行う必要が…。

[TMTN]

create で currentUser.uid; にアクセスしてる部分がユーザー認証する前に処理が行われている為、onAuthStateChanged でユーザー認証してからアクセスしないといけないのですね。

今自宅でない為、実際に確認できないですが帰宅しましたら確認致します。

Answer 1

create で currentUser.uid; にアクセスしてるのが問題で、
onAuthStateChanged の中で行う必要がありましたので以下のようにし解決しました。

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

      if (user) {
        this.authenticatedUser = true;
      } else {
        this.authenticatedUser = false;
      }

      firebase
        .firestore()
        .collection("users")
        .doc(currentUser.uid)
        .get();
    });
  }
};