React forwardRef组件遇TypeScript报错：children属性类型不兼容

错误原因 #

你遇到的Property 'children' does not exist错误，核心是组件的Props类型定义未包含children属性：

• SectionContentT接口仅定义了isLoading，但组件内部解构了children，且使用组件时传递了子元素
• TypeScript校验传入组件的props时，发现children不在SectionContentT的类型范围内，因此抛出错误

两种修复方案 #

方案1：在Props接口中显式定义children

直接给SectionContentT添加children属性，用React.ReactNode覆盖所有合法的React子元素类型：

import type { ReactNode } from 'react';

interface SectionContentT {
  isLoading?: boolean;
  children?: ReactNode; // 添加children属性
}

const SectionContent = forwardRef<HTMLDivElement, SectionContentT>(({children, isLoading}, ref) => {
  return (
    <SectionStyledContent isLoading={isLoading ? 1 : 0} ref={ref}>
      {!isLoading && children}
    </SectionStyledContent>
  );
});

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

React提供的PropsWithChildren工具类型，会自动为自定义Props接口添加children属性，写法更简洁：

import type { PropsWithChildren } from 'react';

interface SectionContentT {
  isLoading?: boolean;
}

// 用PropsWithChildren包裹SectionContentT
const SectionContent = forwardRef<HTMLDivElement, PropsWithChildren<SectionContentT>>(({children, isLoading}, ref) => {
  return (
    <SectionStyledContent isLoading={isLoading ? 1 : 0} ref={ref}>
      {!isLoading && children}
    </SectionStyledContent>
  );
});

补充说明 #

组件内部未报错是因为TypeScript对组件内部解构的props做了宽松推断，但在外部使用组件时，会严格按照forwardRef泛型中定义的Props类型校验传入的所有属性，因此仅在外部触发错误。

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