React+TypeScript中Layout组件body参数类型报错，如何正确定义？

一、Layout组件的类型错误修正 #

你的代码报错核心原因是：React组件的参数必须是props对象，而非直接接收单个值。当你在<Layout>...</Layout>中传递子元素时，React会自动将这部分内容作为children属性传入组件，不是你定义的body参数。

下面是两种正确的写法：

方法1：使用React.FC（函数组件类型） #

React.FC自带对children属性的类型支持（默认类型为React.ReactNode）：

import React from "react";

const Layout: React.FC = ({ children }) => {
  return (
    <div>
      {/* Here will be Header */}
      {children}
    </div>
  );
};

export default Layout;

方法2：自定义Props接口 #

如果需要明确声明props结构，可以手动定义接口：

import React from "react";

interface LayoutProps {
  children: React.ReactNode;
}

const Layout = ({ children }: LayoutProps) => {
  return (
    <div>
      {/* Here will be Header */}
      {children}
    </div>
  );
};

export default Layout;

修改后Home组件的写法无需调整，TypeScript的类型错误会自动消失。

二、Props为HTMLElement时的类型定义 #

如果组件需要接收实际DOM元素作为props（比如通过ref获取的节点），直接使用HTMLElement类型即可。考虑到DOM元素可能为null，通常会结合联合类型处理：

基础示例 #

import React from 'react';

interface DomProps {
  targetElement?: HTMLElement | null;
}

const DomComponent = ({ targetElement }: DomProps) => {
  return (
    <div>
      {targetElement ? `当前DOM节点标签：${targetElement.tagName}` : '未传入DOM节点'}
    </div>
  );
};

更具体的DOM元素类型 #

如果需要限制接收特定类型的DOM元素（比如仅允许按钮元素），可以使用细分类型：

interface SpecificDomProps {
  buttonElement: HTMLButtonElement | null;
}

注意：HTMLElement是浏览器真实DOM节点的类型，和React元素（React.ReactElement）完全不同——React元素是虚拟DOM的描述对象，而HTMLElement是页面渲染后生成的实际节点实例。

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