Next.js+React+Ts项目：动态导入组件无法传参的问题

嘿，我懂你碰到的这个坑！这其实是TypeScript在处理Next.js动态导入组件时的类型推断盲区——默认情况下dynamic函数没办法自动识别你组件的Props类型，所以才会抛出那个类型不兼容的错误。咱们来一步步搞定它：

第一步：给组件明确定义Props类型 #

先回到你的myComponent组件文件里，把它接受的Props类型给明确定义出来，这样TypeScript才有依据做类型检查：

// ../components/myComponent.tsx
import type { ReactNode } from 'react';

// 定义组件的Props类型
export interface MyComponentProps {
  name: string;
  age: number;
  children?: ReactNode; // 如果需要支持children的话可以加上
}

// 组件使用这个类型约束Props
export const myComponent = ({ name, age }: MyComponentProps) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

第二步：在动态导入时手动指定组件类型 #

回到页面文件里，我们需要导入刚才定义的Props类型，然后告诉dynamic函数这个组件的类型是什么。另外提醒下，React组件的命名规范是首字母大写，我顺便给你改成MyComponent了，避免一些隐性问题：

import dynamic from 'next/dynamic';
import type { MyComponentProps } from '../components/myComponent';
import Head from 'next/head';

// 这里通过React.ComponentType结合我们的Props类型，给动态导入的组件指定类型
const MyComponent = dynamic<React.ComponentType<MyComponentProps>>(
  () => import('../components/myComponent').then(mod => mod.myComponent),
  { ssr: false }
);

export default function Home() {
  return (
    <div>
      <Head>
        <title>My site</title>
      </Head>
      <main>
        {/* 现在传props就不会报错啦 */}
        <MyComponent name="Damian" age={27} />
      </main>
    </div>
  );
}

为啥之前会报错？ #

简单说，Next.js的dynamic函数默认返回的类型是React.ComponentType<{}>——也就是只允许传递children或者完全不传Props的组件。当你传入name和age时，TypeScript发现这些Props不在默认允许的范围内，自然就抛出类型不匹配的错误了。手动指定类型后，TypeScript就清楚这个组件接受哪些Props，也就不会拦着你啦。

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