TS 2339错误：match.params.channelId不存在，类组件路由适配问题

更新所有依赖包后，原本正常运行的TypeScript类组件项目出现错误，报错点在match.params.channelId。尝试回滚旧版package.json、删除node_modules和package-lock.json后重新执行npm install，问题依旧。项目使用自定义withRouter高阶组件（HOC）为类组件注入路由参数，希望保留类组件架构，无需重构为Hook组件。

相关组件代码 #

export interface ChannelType{
  name?: string
  channelId: string
}
import { withRouter, WithRouterProps } from '../../services/withRouter'

interface AuthProps {
  sessionToken: string | undefined | null
  channel: ChannelType[]
}
class ChannelEntry extends Component<AuthProps & WithRouterProps, ChannelEntryState> {
  constructor(props: AuthProps & WithRouterProps) {
    super(props)
    // 业务逻辑代码
  }

  someFunction = () => {
    const { match } = this.props;
    fetch(`${APIURL}/channel/${match.params.channelId}/channelentry`, {
      // 请求配置
    })
  }
}

自定义withRouter代码 #

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

export interface WithRouterProps<T = ReturnType<typeof useParams>> {
  history: {
    back: () => void;
    goBack: () => void;
    location: ReturnType<typeof useLocation>;
    push: (url: string, state?: any) => void;
  }
  location: ReturnType<typeof useLocation>;
  match: {
    params: T;
  };
  navigate: ReturnType<typeof useNavigate>;
}

export const withRouter = <P extends object>(Component: ComponentType<P>) => {
  return (props: Omit<P, keyof WithRouterProps>) => {
    const location = useLocation();
    const match = { params: useParams() };
    const navigate = useNavigate();

    const history = {
      back: () => navigate(-1),
      goBack: () => navigate(-1),
      location,
      push: (url: string, state?: any) => navigate(url, { state }),
      replace: (url: string, state?: any) => navigate(url, {
        replace: true,
        state
      })
    };

    return (
      <Component
        history={history}
        location={location}
        match={match}
        navigate={navigate}
        {...props as P}
      />
    );
  };
};

1. 彻底修复依赖版本问题 #

回滚后依赖可能存在缓存或版本不匹配，执行以下步骤：

• 删除node_modules、package-lock.json文件
• 清空npm缓存：npm cache clean --force
• 对照git历史中的旧版package.json，确保所有依赖版本完全一致
• 重新执行npm install

2. 修正TypeScript类型错误 #

（1）修复接口大小写错误

组件代码中导入的接口是WithRouterProps，但声明组件时误写为withRouterProps，先修正：

class ChannelEntry extends Component<AuthProps & WithRouterProps, ChannelEntryState> {
  constructor(props: AuthProps & WithRouterProps) {
    super(props)
    // ...
  }
}

（2）明确路由参数类型

为WithRouterProps传入泛型，让TypeScript正确识别channelId：

class ChannelEntry extends Component<AuthProps & WithRouterProps<{ channelId: string }>, ChannelEntryState> {
  // ...
}

（3）优化withRouter的类型定义

修改HOC代码，支持显式传入路由参数类型：

export const withRouter = <P extends object, T = ReturnType<typeof useParams>>(Component: ComponentType<P & WithRouterProps<T>>) => {
  return (props: Omit<P, keyof WithRouterProps<T>>) => {
    const location = useLocation();
    const params = useParams<T>();
    const match = { params };
    const navigate = useNavigate();

    const history = {
      back: () => navigate(-1),
      goBack: () => navigate(-1),
      location,
      push: (url: string, state?: any) => navigate(url, { state }),
      replace: (url: string, state?: any) => navigate(url, {
        replace: true,
        state
      })
    };

    return (
      <Component
        history={history}
        location={location}
        match={match}
        navigate={navigate}
        {...props as P}
      />
    );
  };
};

3. 确认组件被正确包裹 #

确保ChannelEntry组件导出时被withRouter包裹：

export default withRouter(ChannelEntry);

4. 临时快速修复（类型断言） #

如果需要紧急恢复运行，可以临时添加类型断言：

const { match } = this.props;
const channelId = (match.params as { channelId: string }).channelId;
fetch(`${APIURL}/channel/${channelId}/channelentry`, {
  // 请求配置
})

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