在React+TypeScript项目中如何定义React Router Dom的history和match类型

解决方案 #

你之前的核心错误是误用了RouteComponentProps的泛型参数：该泛型第一个入参是用来定义match.params的字段类型，而非传入自定义props。以下是符合规范的修改步骤：

步骤1：定义路由参数与自定义props类型 #

// 1. 声明路由匹配参数的类型（你用到了match.params.slug）
interface EditPlaylistMatchParams {
  slug: string;
}

// 2. 声明Redux注入的自定义属性类型，不要用宽泛的Function，尽量写明确的函数签名
interface EditPlaylistCustomProps {
  getPlaylist: (slug: string) => Promise<void> | void; // 替换为你实际的getPlaylist返回类型
  playlist: Playlist;
  auth: Auth;
}

// 3. 组件总props = RRD自动注入的路由属性 + 自定义属性
type EditPlaylistProps = RouteComponentProps<EditPlaylistMatchParams> & EditPlaylistCustomProps;

步骤2：修改组件声明与状态类型 #

直接使用上面声明的EditPlaylistProps作为组件props类型即可，不需要单独定义history、match的类型，RouteComponentProps已经内置了符合RRD v5规范的对应类型。同时补全useState的类型避免后续访问属性报错：

function EditPlaylist({
    history,
    auth,
    getPlaylist,
    playlist,
    match,
}: EditPlaylistProps) {
  // 补全state类型，匹配你后续存储的结构
  const [currentPlaylist, setcurrentPlaylist] = useState<{playlist?: Playlist}>({})

  // 其余业务代码不变
}

可删除的冗余代码 #

• 删掉单独导入的import { History } from "react-router-dom"，不需要单独声明history类型
• 删掉你之前定义的EditPlaystProps2、EditPlaystProps两个无用类型

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