将React JS容器组件转TS时遇'children不存在于IntrinsicAttributes'错误求助

问题背景 #

将纯JavaScript编写的React Container组件转换为TypeScript版本后，出现错误提示：Property 'children' does not exist on type 'IntrinsicAttributes'，调整类型定义后仍无法解决。

原JavaScript代码 #

export const Container = ({
    as: Element = 'div',
    children,
    className,
    ...rest
}) => {
    return (
        <Element
            {...rest}
            className={`px-5 w-full max-w-screen-md m-auto ${className}`}
        >
            {children}
        </Element>
    )
}

转换后的TypeScript代码（存在问题） #

import { ReactNode } from "react";

export const Container = ({
  as: Element = "div",
  children,
  className,
  ...rest
}: {
  as: string;
  children: ReactNode;
  className: string;
  rest: any;
}) => {
  return (
    <Element
      {...rest}
      className={`px-5 w-full max-w-screen-md m-auto ${className}`}
    >
      {children}
    </Element>
  );
};

错误原因分析 #

1. as的类型定义错误：
   你将as定义为string类型，但React中用于渲染的元素（原生HTML标签或自定义组件）需要用React.ElementType类型。当TypeScript只识别as为普通字符串时，无法关联到React元素的合法props集合，导致传递children等属性时触发IntrinsicAttributes类型不匹配错误。

2. rest的类型定义错误：
   直接在props接口中定义rest: any是错误的写法，解构出来的剩余props需要匹配目标元素的合法props类型。这种模糊的any定义会让TypeScript无法校验props的兼容性，反而加剧类型冲突。

3. 未处理可选属性：
   原JS代码中as有默认值（可选）、className和children也可能不传，但TS代码中把它们都定义为必填项，不仅不符合原逻辑，也会导致类型校验异常。

修复后的TypeScript代码 #

import { ReactNode, ElementType, ComponentPropsWithoutRef } from "react";

export const Container = ({
  as: Element = "div",
  children,
  className,
  ...rest
}: {
  as?: ElementType;
  children?: ReactNode;
  className?: string;
} & ComponentPropsWithoutRef<ElementType>) => {
  return (
    <Element
      {...rest}
      className={`px-5 w-full max-w-screen-md m-auto ${className ?? ""}`}
    >
      {children}
    </Element>
  );
};

修复说明 #

• 使用ElementType定义as，让TypeScript明确这是合法的React元素类型，支持原生标签和自定义组件。
• 通过ComponentPropsWithoutRef<ElementType>继承目标元素的props类型，确保...rest的props完全符合元素要求，解决类型不兼容问题。
• 将as、children、className设为可选类型，与原JS代码的行为保持一致；同时用className ?? ""处理className为undefined的情况，避免模板字符串出现undefined。

内容的提问来源于stack exchange，提问作者Minh Thông