Next.js（TSX）开发中children隐式any类型错误及props失效求助

问题原因 #

你遇到的Binding element 'children' implicitly has an 'any' type.ts(7031)错误，是因为TypeScript严格类型检查模式下，未给组件props指定类型，导致无法推断children的类型，默认被识别为any。而children无法正常工作，大概率是组件使用方式不规范，或是类型缺失引发的TS编译隐性问题。

修复方案 #

方案1：使用React.FC类型（简洁高效） #

React.FC（Function Component）类型默认包含children属性，同时可以扩展HTML元素的原生props（比如className、style等）：

import styles from "./layout.module.css";
import type { FC } from 'react';

// 继承main元素的HTML属性类型
const Layout: FC<React.HTMLAttributes<HTMLElement>> = ({ children, ...props }) => {
  return (
    <main className={styles.main} {...props}>
      {children}
    </main>
  );
};

export default Layout;

方案2：自定义Props接口（更灵活） #

通过PropsWithChildren包裹自定义接口，明确声明children和其他props的类型：

import styles from "./layout.module.css";
import type { PropsWithChildren, HTMLAttributes } from 'react';

// 自定义Layout的props，继承main元素的原生属性
interface LayoutProps extends HTMLAttributes<HTMLElement> {}

export default function Layout({ children, ...props }: PropsWithChildren<LayoutProps>) {
  return (
    <main className={styles.main} {...props}>
      {children}
    </main>
  );
}

确保children正常渲染的注意事项 #

• 在_app.tsx中正确使用Layout：
  确保页面内容被Layout组件包裹，示例如下：

  import Layout from '../components/Layout';
  import type { AppProps } from 'next/app';
  
  export default function App({ Component, pageProps }: AppProps) {
    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    );
  }
  

• 检查TypeScript配置：
  确认tsconfig.json中strict选项为true（Next.js默认配置），开启严格模式能保证类型安全，避免类似问题复发。

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