firebaseでのログアウト機能が実行できない

Question

前提・実現したいこと

firebaseのログアウト機能を使ってログアウトをしたい

発生している問題・エラーメッセージ

エラーメッセージ
ypeError: Cannot read properties of null (reading 'displayName')
    at Object.eval [as next] (index.js?4360:43)
    at eval (index.esm.js?a8e9:1392)
    at eval (index.esm.js?a8e9:1502)
//TypeError：nullのプロパティを読み取ることができません（ 'displayName'を読み取る）

該当のソースコード

import Vue from 'vue'
import Vuex from 'vuex'
import firebase from 'firebase'
import router from '@/router'
//import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    username: '',
    userNames: [],
    email: '',
    password: '',
  },
  getters: {
    setUsername(state) {
      return state.username
    },
    setUsers(state) {
      return state.userNames
    }
  },
  mutations: {
    registerState(state, payload) {
      state.username = payload.username
      state.email = payload.email
      state.password = payload.password
    },
    loginState(state, payload) {
      state.username = payload.username
      state.email = payload.email
      state.password = payload.password
    },
    setUser(state, payload) {
      state.username = payload.username
    }
  },
  actions: {
    setUser(context, payload) {
      const db = firebase.firestore()
      firebase.auth().onAuthStateChanged((username) => {
        payload.username = username.displayName;
      })
      db.collection('user').orderBy('namber', 'desc').limit(3)
      .get()
      .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          // doc.data() is never undefined for query doc snapshots
          console.log(doc.get('username'))
          this.state.userNames.push(doc.get('username')) 
          console.log(this.state.userNames)
        });
      })
      .then(() => {
        context.commit('setUser', payload)
      })
      .catch((error) => {
        console.log("Error getting documents: ", error);
      });
      console.log(this.state.userNames)
    },
    signOut() {
      firebase.auth().signOut()
      .then(() => {
        router.push('/login')
      })
      .catch((e) => {
        console.error('エラー :', e.message)
      })
    },
    newRegister(context, payload) {
      firebase
      .auth()
      .createUserWithEmailAndPassword(payload.email, payload.password)
      .then(() => {
        const user = firebase.auth().currentUser
        user.updateProfile({
          displayName: payload.username,
        },)
        .then(() => {
          // データベースへ登録
          const db = firebase.firestore();
          db.collection("user").doc(user.uid).set({
              uid: user.uid,
              email: payload.email,
              password: payload.password,
              username: payload.username,
              namber: firebase.firestore.Timestamp.fromDate(new Date())
          })
        })
        .then(() => {
          context.commit('registerState', payload)
        })  
        .then(() => {
          router.push('/about')
        })})
      .catch((e) => {
        console.error('エラー :', e.message)
      })
    },
    loginUser(context, payload) {
      firebase
      .auth()
      .signInWithEmailAndPassword(payload.email, payload.password)
      .then(() => {
        context.commit('loginState', payload)
      })
      .then(() => {
        console.log("ログイン成功!");
        router.push('/about');
      })
      .catch((e) => {
        console.error('エラー :', e.message)
      })
    }
  },
})

<ul>
      <li class="userList">{{username}}さんようこそ</li>
      <span class="balance">残高 : 1000</span>
      <button class="login-btn button is-info" @click="signOut">ログアウト</button>
    </ul>
...
  methods: {
    signOut() {
      this.$store.dispatch('signOut')
    }
  },

試したこと

自分なりの解釈はログアウトしたいユーザーが読み取られていないからdisplaiName: Null になってしまっているのかなと思い、
firebase.auth().onAuthStateChanged((username) => { やfirebase.auth().currentUser
のコードでログインしているユーザーを取得して、displayNameを指定してあげれば実装できると思い、行ってみましたが、同じエラーが発生してしまいました、どのようにすればエラーが表示されなくなるのか改善すべき点などありましたら教えていただきたいです。

補足

vueに直書きせずにactions経由で実装させようと思っています。

Answer 1

firebase.auth().onAuthStateChangeはログイン状態が変化した際に動作しますので、ログアウト直後の動作で問題が出ているのかなと思います。

このようにしてみたらいかがでしょう。

      firebase.auth().onAuthStateChanged((username) => {
        if(username) payload.username = username.displayName;
      })

Answer 2

ログインした時点でユーザー名は表示出来るのでしょうか？