React Router v6 Navigate传state时TypeScript类型错误如何解决

错误原因 #

你出现报错的核心原因有两个：

• React Router v6 中 location.state 的默认类型是 State | undefined，未声明自定义字段时无法识别email属性
• 你只给useLocation传入了自定义泛型，但没有处理state为undefined的边界场景，直接解构会触发额外的类型和运行时错误

修复方案 #

方案1：单组件临时适配（适合少部分路由传参场景） #

直接在当前组件声明state类型，同时加兜底逻辑即可：

import { useLocation, useNavigate } from 'react-router-dom';

// 声明当前路由接收的state类型
interface LocationState {
  email: string;
}

const SentPasswordResetInstructions = () => {
  const navigate = useNavigate();
  const location = useLocation<LocationState>();

  // 方式1：给state加默认值，避免undefined报错
  const { email } = location.state ?? { email: '' };

  // 方式2：类型守卫提前拦截异常场景（更推荐）
  if (!location.state?.email) {
    // 没有拿到邮箱时直接跳回上一步，避免后续逻辑异常
    navigate('/forgot-password');
    return null;
  }
  // 走到这一步时state的email一定存在，可直接使用
  const email = location.state.email;

  // 剩余组件逻辑
}

方案2：全局类型扩展（适合项目多路由传参场景） #

如果项目里多个路由都需要通过state传参，可以全局扩展React Router的State类型，一次配置全项目生效：

1. 在项目src目录下新建react-router-dom.d.ts类型声明文件
2. 写入以下内容：

import 'react-router-dom';

declare module 'react-router-dom' {
  interface State {
    // 把所有路由需要用到的state字段统一在这里声明
    email?: string;
    // 其他字段例如userId、from、redirectUrl等都可以在此处添加
  }
}

配置完成后，所有组件内使用useLocation不需要额外加泛型，直接通过location.state?.email调用就不会触发类型错误。

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