React TypeScript自定义Link组件报children属性不存在类型错误解决方法

你遇到的类型错误核心原因有两点：

1. React 18 版本之后，React.FC类型不再隐式包含children属性，所有需要接收子节点的组件必须在props类型中手动声明children字段。你的LinkType接口只声明了onClick属性，父组件调用时传入了字符串子节点（如About/Skills等），TS检测到传入了未定义的props字段，因此抛出类型不匹配错误。
2. 你的Link组件返回的Typography是自闭合标签，即使修复类型问题，传入的子节点内容也无法正常渲染。

原报错信息：

Type '{ children: string; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & LinkType'. Property 'children' does not exist on type 'IntrinsicAttributes & LinkType'.

方案1：手动在props接口中声明children #

修改Link.tsx的类型定义，补充children类型声明，同时修正Typography的渲染逻辑，不要使用自闭合标签，将传入的children渲染到组件内部：

import { ReactNode, MouseEventHandler } from 'react';
// 其余依赖（Typography、classes）保持原有引入不变

interface LinkType {
  onClick: MouseEventHandler<HTMLElement>;
  children: ReactNode;
}

const Link = (props: LinkType) => {
  return (
    <Typography onClick={props.onClick} className={classes.Link}>
      {props.children}
    </Typography>
  );
};

export default Link;

方案2：使用React内置的PropsWithChildren工具类型 #

如果不想每次手动写children类型，可以直接用React提供的PropsWithChildren工具类型包裹自定义props，会自动给props加上合法的children类型定义：

import { PropsWithChildren, MouseEventHandler } from 'react';
// 其余依赖（Typography、classes）保持原有引入不变

type LinkType = PropsWithChildren<{
  onClick: MouseEventHandler<HTMLElement>;
}>

const Link = (props: LinkType) => {
  return (
    <Typography onClick={props.onClick} className={classes.Link}>
      {props.children}
    </Typography>
  );
};

export default Link;

• 遇到TS类型报错先逐字读报错提示：本次报错直接指明children属性不存在于组件props类型中，优先排查自定义组件的props接口定义即可快速定位
• 注意框架版本的Breaking Change：React 18 移除了React.FC默认自带children的隐式类型，从旧版本升级的项目很容易踩这个坑
• 类型修复后同步检查渲染逻辑：注意自定义组件是否真的接收并渲染了传入的子节点，避免出现类型通过但页面内容不显示的问题

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