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

前提・実現したいこと

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'を読み取る）

該当のソースコード

store
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)
      })
    }
  },
})

vue
<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を指定してあげれば実装できると思い、行ってみましたが、同じエラーが発生してしまいました、どのようにすればエラーが表示されなくなるのか改善すべき点などありましたら教えていただきたいです。