React TypeScript权限路由HOC报错：Props类型不兼容求助

错误原因 #

你的HOC泛型约束<Props extends JSX.IntrinsicAttributes>限制了传入组件的Props必须是JSX.IntrinsicAttributes的子集，但Dialogs组件有自己的自定义Props（DialogsProps），和IntrinsicAttributes无交集，导致TypeScript判定类型不兼容。

解决方案 #

修改HOC的泛型定义，移除不必要的extends JSX.IntrinsicAttributes约束，让Props支持任意类型：

import { Navigate } from "react-router-dom";
import { useAppSelector } from "../redux/redux-store";
import React from "react";

// 移除泛型的extends约束，允许任意Props类型
export const withAuthNavigate = <Props>(
    Component: React.ComponentType<Props>
) => (props: Props) => {
    const isAuth = useAppSelector(state => state.authReducer.isAuth)
    return isAuth ? <Component {...props} /> : <Navigate to="/login" />
}

为什么这样改 #

React.ComponentType<Props>本身就支持接收任意Props类型的组件，不需要额外限制为JSX.IntrinsicAttributes的子类型。原约束错误地要求组件只能使用HTML元素的固有属性，而你的业务组件需要自定义Props，因此引发类型冲突。

修改后，TypeScript会自动推断传入组件的Props类型，HOC可以正确传递props给目标组件，同时保持权限校验逻辑不变。

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