Vue项目注册触发无限递归错误问题排查求助

尝试注册带有特定角色的新用户时，遇到了无限递归错误。以下是项目相关代码：

main.js #

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

store.dispatch("fetchUser").then(() => {
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
  
})

store.js #

import Vue from 'vue'
import Vuex from 'vuex'
import { auth, db } from "../firebaseConfig"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    role: null
  },
  getters: {
    isAuthenticated: (state) => !!state.user,
    userRole: (state) => state.role
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    },
    SET_ROLE(state, role) {
      state.role = role
    }
  },
  actions: {
    async login({ commit }, { email, password }) {
      const userCredential = await auth.signInWithEmailAndPassword(email, password)
      const user = userCredential.user

      const roleDoc = await db.collection("roles").doc(user.uid).get()
      const role = roleDoc.data()?.role

      commit("SET_USER", user)
      commit("SET_ROLE", role)

      if (role === "admin") this.$router.push("/admin")
      else if (role === "finance") this.$router.push("/finance")
      else if (role === "cashier") this.$router.push("/cashier")
    },
    async logout({ commit }) {
      await auth.signOut()
      commit("SET_USER", null)
      commit("SET_ROLE", null)
    },
    async fetchUser({ commit }) {
      auth.onAuthStateChanged(async (user) => {
        if (user) {
          const roleDoc = await db.collection("roles").doc(user.uid).get()
          const role = roleDoc.data()?.role

          commit("SET_USER", user)
          commit("SET_ROLE", role)

        } else {
          commit("SET_USER", null)
          commit("SET_ROLE", null)
        }
      })
    },
    async register({commit},{ email, password, role }) {

      try {
        const userCredential = await auth.createUserWithEmailAndPassword(email, password)
        const user = userCredential.user

        await db.collection("roles").doc(user.uid).set({ role })

        commit("SET_USER" , user)
        commit("SET_ROLE" , role)
        
        

      } catch (error) {
        console.error("Error in registration:" , error.message)
        throw error
      }



    }
  },
  modules: {
  }
})

router.js #

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import store from "../store"


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {path: "/admin" , component: ()=> import("../views/AdminView.vue"), meta:{role: "admin"}},
  {path:"/finance" , component: ()=> import("../views/FinanceView.vue") , meta:{role: "finance"}},
  {path: "/cashier" , component: () => import("../views/CashierView.vue") , meta:{role:"cashier"}},
  {path: "/userRegistration" , component:()=> import("../views/RegisterView.vue") },
  {path: "/login" , component:()=>import("../views/LoginView.vue")}
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to , from , next) =>{
  console.log("navigation from:" , from.path , "to:" , to.path)
  const isAuthenticated = store.getters.isAuthenticated
  const userRole = store.getters.userRole

  if(to.matched.some((record) => record.meta.role)){
    if(!isAuthenticated){
      return next("/login")
    }
    if(to.meta.role !== userRole){
      return next("/")
    }
  }

  next()
})
export default router

我无法定位递归发生的位置，已经检查过router.js中的beforeEach路由守卫（用户认证后会被路由到对应页面），不确定是否是main.js中store.dispatch("fetchUser")在后台持续运行导致的问题。

内容的提问来源于stack exchange，提问作者user2717927