React布局组件类型错误：'{children:Element;}'与'IntrinsicAttributes'无共同属性

你错误地将Next.js为页面组件（如pages目录下的文件）设计的NextPage类型，标注给了普通布局组件。NextPage的props结构和普通React组件不匹配，TypeScript会忽略你自定义的LayoutProps，导致传入children时出现类型不兼容的错误。

移除NextPage类型标注，改用React官方提供的函数组件类型，或者直接让TypeScript自动推断组件类型：

方案1：使用React.FC类型 #

import React from 'react'

interface LayoutProps {
  children: React.ReactNode;
}

// 用React.FC包裹自定义Props类型
const Layout: React.FC<LayoutProps> = ({ children }) => {
  return (
    <>
      <div>
        <main>
          {children}
        </main>
      </div>
    </>
  );
};

export default Layout

方案2：直接定义参数类型（无需额外组件类型标注） #

如果不想使用React.FC，可以直接给组件参数指定LayoutProps，组件本身无需额外类型标注：

import React from 'react'

interface LayoutProps {
  children: React.ReactNode;
}

const Layout = ({ children }: LayoutProps) => {
  return (
    <>
      <div>
        <main>
          {children}
        </main>
      </div>
    </>
  );
};

export default Layout

NextPage是Next.js专为页面组件设计的类型，会包含router等Next.js特定属性，仅适用于pages目录下的页面文件。普通布局组件使用React原生的函数组件类型即可，能正确识别自定义的props结构。

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