TypeScript ErrorBoundary组件props与interface错误修复咨询

错误原因分析 #

问题出在Props与State的泛型参数顺序搞混，同时未在ErrorBoundary的Props类型中声明children属性，导致TypeScript无法识别组件接收的子元素。另外你错误地将children放到了State中，不符合React数据流逻辑——子组件应从Props传入，而非存储在State里。

具体修复步骤 #

1. 拆分Props和State的接口定义
   • Props：包含组件接收的外部参数，即title和children
   • State：仅存储组件内部状态，即hasError
2. 修正Component泛型参数顺序
   React.Component的泛型格式为Component<PropsType, StateType>，你之前把State类型放到了Props的位置，导致类型不匹配。
3. 正确读取子组件
   子组件通过Props传入，render中应返回this.props.children，而非this.state.children。

修复后的ErrorBoundary.tsx代码 #

import { Component, ReactNode, ErrorInfo } from "react";

// 定义组件接收的Props类型
interface ErrorBoundaryProps {
  title: string;
  children: ReactNode; // ReactNode比JSX.Element更通用，支持文本、多元素等场景
}

// 定义组件内部的State类型
interface ErrorBoundaryState {
  hasError: boolean;
}

class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = {
      hasError: false,
    };
  }

  // ErrorBoundary必须实现的生命周期方法，用于更新错误状态
  static getDerivedStateFromError(_: Error): ErrorBoundaryState {
    return { hasError: true };
  }

  // 可选：捕获错误信息用于日志上报
  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("ErrorBoundary捕获到错误:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Ooops. That is an Error</h1>;
    }
    // 返回Props传入的子组件
    return this.props.children;
  }
}

export default ErrorBoundary;

额外说明 #

• 必须加上getDerivedStateFromError和componentDidCatch这两个ErrorBoundary核心生命周期方法，否则组件无法正确捕获子组件的错误（原版JS代码应该包含这两个方法，TS改造时容易遗漏）。
• 使用ReactNode作为children的类型，比JSX.Element | JSX.Element[]更灵活，支持文本、Fragment、null等多种React节点类型。

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