如何让组件等待异步函数执行完成后返回？Firebase私路由刷新跳转问题

问题核心原因 #

你遇到的刷新跳转问题来自两个逻辑错误：

1. 鉴权状态初始值配置错误：isLoading初始设为false，导致Firebase异步返回登录状态前，私有路由就判定加载完成，用初始的isAuthenticate=false触发了登录跳转
2. 对Firebase的onAuthStateChangedAPI使用有误：该API是观察者模式的回调函数，不是Promise，不需要用async/await包裹

修复步骤 #

1. 修改authSlice的初始状态与reducer逻辑

页面初始化阶段默认处于等待Firebase鉴权结果的状态，因此isLoading初始值要设为true，同时调整reducer确保拿到鉴权结果后统一结束加载状态：

const authSlice = createSlice({
  name: "auth",
  initialState: {
    auth: {
      isLoading: true, // 初始为加载中，等待鉴权结果
      isAuthenticate: false,
      user: {...User},
    },
  },
  reducers: {
    checkState(state,action){
      state.auth.isLoading = false // 拿到鉴权结果后直接结束加载
      state.auth.isAuthenticate = action.payload
    }
  ...
  },
})

2. 修正App.jsx中的鉴权监听逻辑

移除多余的async/await包装，同时添加组件卸载时的监听器销毁逻辑，避免内存泄漏：

useEffect(()=>{
  // 直接注册鉴权状态监听器，返回值为销毁监听器的函数
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    if (user) {
      dispatch(checkState(true))
      // 可补充将用户完整信息存入store的逻辑
    } else {
      dispatch(checkState(false))
    }
  });
  // 组件卸载时销毁监听器
  return unsubscribe
},[dispatch,auth])

修复后逻辑说明 #

页面刷新后：

• 初始状态isLoading=true，私有路由会先渲染加载动画，不会触发跳转
• 等Firebase异步返回当前用户的登录状态后，触发checkState action更新Redux状态，结束加载
• 私有路由再根据最终的isAuthenticate值判断是渲染对应页面还是跳转到登录页，完全避免了提前跳转的问题

内容的提问来源于stack exchange，提问作者Lộc Trần Phước