React Firebase笔记应用刷新Profile页报错，首次加载正常

问题描述 #

基于React和Firebase开发的笔记应用，Profile页面首次加载时功能正常，但刷新页面后出现空白屏，控制台抛出以下错误：

react-dom.development.js:26923 Uncaught TypeError: Cannot read properties of undefined (reading '0')

错误触发在<Profile>组件中。

相关代码 #

Profile组件代码 #

function Profile() {
  const { user } = useContext(AppContext);
  const navigate = useNavigate();
  useEffect(() => {
    if (!user) {
      navigate('/');
    } else {
      navigate('/profile');
    }
  }, []);

  return (
    <m.div className="flex flex-col items-center justify-center gap-8 p-5" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
      <UpdateName />
      {user?.providerData[0]?.providerId === 'password' ? (
        <>
          <UpdateEmail />
          <UpdatePassword />
        </>
      ) : (
        <>
        </>
      )}
      <Logout />
      <DeleteAccount />
    </m.div>
  );
}

export default Profile;

路由代码片段 #

<AppProvider>
  <LazyMotion features={domAnimation}>
    <div className="App">
      <main>
        <AnimatePresence mode="wait">
          <Routes location={location} key={location.pathname} initial={true}>
            <Route
              path="/profile"
              element={
                <React.Suspense fallback={<Spinner />}>
                  <Profile />
                </React.Suspense>
              }
            />
          </Routes>
        </AnimatePresence>
      </main>
      <ToastContainer />
    </div>
  </LazyMotion>
</AppProvider>

报错演示 #

问题原因 #

1. 异步加载时机问题：刷新页面时，Firebase的用户认证状态是异步获取的，AppContext中的user初始值为undefined，此时组件渲染时user?.providerData可能为undefined，直接访问[0]就会触发类型错误。
2. useEffect依赖缺失：原useEffect的依赖数组为空，仅在组件挂载时执行一次。当后续user状态加载完成后，不会重新执行导航逻辑，且无效的navigate('/profile')可能引发不必要的路由跳转。

解决方法 #

1. 完善可选链保护 #

修改providerData的访问逻辑，确保providerData存在后再访问索引：

{user?.providerData?.[0]?.providerId === 'password' ? (
  <>
    <UpdateEmail />
    <UpdatePassword />
  </>
) : (
  <>
  </>
)}

2. 修复useEffect逻辑 #

添加user和navigate作为依赖，移除无效的重复导航：

useEffect(() => {
  if (!user) {
    navigate('/');
  }
}, [user, navigate]);

3. 添加加载状态拦截 #

在组件渲染前判断user是否加载完成，未完成时显示加载组件：

function Profile() {
  const { user } = useContext(AppContext);
  const navigate = useNavigate();

  useEffect(() => {
    if (!user) {
      navigate('/');
    }
  }, [user, navigate]);

  // 未加载完成时显示Spinner
  if (!user) {
    return <Spinner />;
  }

  return (
    // 原渲染内容
  );
}

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