React函数组件中TypeScript无法识别defaultProps的解决方法

可以用defaultProps解决这个TS报错，但不能直接用React.FC定义组件——因为FC的泛型类型不会自动结合defaultProps把可选属性标记为非可选，所以TS依然会认为onClick可能是undefined。

正确写法（不使用React.FC） #

interface ButtonProps {
  onClick?: () => void;
}

// 直接定义函数组件，放弃React.FC
const Button = ({ onClick }: ButtonProps) => {
  const wrapClick = () => {
    onClick(); // 此处不再报TS2722错误
  };

  return <button onClick={wrapClick}>button</button>;
};

Button.defaultProps = {
  onClick: () => {},
};

为什么这种写法可行？ #

当不使用React.FC时，TypeScript会自动结合组件的defaultProps推断内部可用的props类型——它能识别到onClick有默认值兜底，因此在组件内部访问时不会被判定为undefined。

针对大量属性的场景优势 #

这种写法刚好适配你的需求：只需要在defaultProps里一次性设置所有可选属性的默认值，组件内部不用逐个写props.xxx = 默认值这类参数默认值，减少重复代码，维护起来更高效。

原React.FC写法报错的原因 #

React.FC的类型定义逻辑是：组件props的类型完全等同于你传入的泛型（比如这里的ButtonProps），不会结合defaultProps做类型调整。所以即使你设置了defaultProps，TS依然认为onClick是可选状态（可能为undefined），调用时自然触发报错。

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