React与TypeScript中父组件向子组件传递用户数据时路由配置文件报错问题排查

你遇到的核心问题非常清晰：在路由配置中渲染PaceLabsDashboard组件时，没有传递它必须的loggedInUserData属性——这直接导致父组件无法获取用户数据，进而无法向子组件DashboardHeader传递username，最终引发错误。

为什么子传父正常但父传子出错？ #

子传父一般通过回调函数实现，不需要依赖父组件的初始props；但父传子的前提是父组件自身能拿到要传递的数据，并且正确传递给子组件。你的路由配置里完全没给PaceLabsDashboard传入必要的props，这就是问题的源头。

具体修复步骤 #

1. 解决路由组件的props传递问题

你的当前路由代码：

{ path: "/my-dashboard", element: <PaceLabsDashboard />, }

这里PaceLabsDashboard需要loggedInUserData作为props，但你没有传入。结合代码里提到的store/slice/auth/authSlice.types，推测用户数据存在Redux Store中，我们可以通过两种方式修复：

方式一：用容器组件封装，从Redux取数后传递

创建一个容器组件，负责从Redux中获取用户数据，再传递给PaceLabsDashboard：

// 导入Redux相关依赖
import { useSelector } from 'react-redux';
import { RootState } from 'store'; // 你的RootState类型定义
import PaceLabsDashboard from './PaceLabsDashboard';

const PaceLabsDashboardContainer = () => {
  // 从Store中提取登录用户数据
  const loggedInUserData = useSelector((state: RootState) => state.auth.loggedInUserData);
  
  // 增加边界判断：数据未加载时显示加载状态或重定向到登录页
  if (!loggedInUserData) {
    return <div>Loading user data...</div>;
  }
  
  return <PaceLabsDashboard loggedInUserData={loggedInUserData} />;
};

然后修改路由配置：

{ path: "/my-dashboard", element: <PaceLabsDashboardContainer />, }

方式二：直接在PaceLabsDashboard内部获取Redux数据

如果你不想额外创建容器组件，也可以让PaceLabsDashboard直接从Redux中取数，不再依赖外部props：

// 修改PaceLabsDashboard组件
import { useSelector } from 'react-redux';
import { RootState } from 'store';

// 移除原有的DashboardProps接口，直接从Store取数
const PaceLabsDashboard = (): JSX.Element => {
  const loggedInUserData = useSelector((state: RootState) => state.auth.loggedInUserData);
  
  if (!loggedInUserData) {
    return <div>Loading user data...</div>;
  }

  console.log(loggedInUserData.name);
  return (
    <Box>
      <Box sx={{ width: "100%", height: "72px" }}>
        <DashboardHeader username={loggedInUserData.name} />
      </Box>
      {/* 其他原有内容保持不变 */}
    </Box>
  );
};

这种方式下，你的路由配置可以保持原样，因为组件不再需要外部传入props。

2. 增加类型安全与边界处理

为了避免数据未加载时出现报错，建议补充以下处理：

• 给DashboardHeader的props设置默认值：

interface DashboardHeaderProps { username?: string; }
const DashboardHeader = ({ username = 'Guest' }: DashboardHeaderProps): JSX.Element => {
  // ...组件原有内容
  return <Typography className={classes.welcomeText}>Hello {username}, welcome back!</Typography>;
};

• 在父组件中使用可选链和默认值兜底：

<DashboardHeader username={loggedInUserData?.name || 'Guest'} />

验证修复 #

完成上述修改后，路由渲染PaceLabsDashboard时会正确获取用户数据，父组件就能顺利将username传递给子组件DashboardHeader，头部就能正常展示用户名了。

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