在TypeScript中使用HOC时抛出错误：找不到ComposedComponent

嘿，我来帮你搞定这个问题！这个错误本质上是编译器找不到你引用的ComposedComponent变量，通常有几个常见原因和对应的解决办法：

常见原因&修复方案 #

1. 拼写错误或作用域误用 #

最容易踩的坑就是使用ComposedComponent时拼写失误（比如写成ComposedComponet），或者错误地用this.ComposedComponent去访问它——它是HOC外部函数的参数，属于闭包变量，不需要加this前缀。

2. 未在内部组件中渲染传入的目标组件 #

你的HOC接收了ComposedComponent作为参数，但如果不在内部的Authentication类的render方法里渲染它，不仅HOC失去了意义，还可能在严格模式下触发相关错误（当然你的情况更偏向拼写问题，但补上render逻辑是必要的）。

完整修复后的代码示例 #

import * as React from 'react';
import { Component } from 'react';
import { connect } from 'react-redux';

// 定义Props接口，按需扩展
interface Props {
  isAuthenticated: boolean;
  // 如果需要路由跳转，添加history属性
  history?: any;
}

// 从Redux State映射所需属性
const mapStateToProps = (state: any) => ({
  isAuthenticated: state.auth.isAuthenticated, // 根据你的Redux结构调整
});

const AuthComponent = (ComposedComponent: React.ComponentType<Props>) => {
  class Authentication extends Component<Props> {
    componentWillMount() {
      if (!this.props.isAuthenticated) {
        // 未授权时的逻辑，比如跳转到登录页
        this.props.history?.push('/login');
      }
    }

    // 必须在render中渲染传入的组件，否则HOC无法生效
    render() {
      // 直接使用ComposedComponent，无需加this
      return <ComposedComponent {...this.props} />;
    }
  }

  // 用connect注入Redux状态后返回包装组件
  return connect(mapStateToProps)(Authentication);
};

export default AuthComponent;

额外注意事项 #

• 如果需要使用路由跳转功能，记得用withRouter包装HOC的返回值，或者把history添加到Props接口中。
• 确保TypeScript配置没有过度限制作用域访问（正常情况下闭包能正确读取外部函数的参数）。

内容的提问来源于stack exchange，提问作者Tomasz Klęk