TypeScript动态组件传data属性报错：类型不兼容问题求解

问题场景 #

在Next.js项目中通过dynamic动态导入对应slug的组件（如ContactUs）并传递data属性时，出现TypeScript错误提示：

Type '{ data: any; }' is not assignable to type 'IntrinsicAttributes'

尽管data在目标组件中能正常打印和使用，但类型报错始终存在。

解决方案 #

TypeScript报错的核心原因是dynamic默认无法推断出动态导入组件的Props类型，需要显式为其指定类型约束。

1. 定义通用Props类型 #

先创建一个所有动态导入组件都遵循的统一Props类型，建议放在单独的类型文件中（如@/types/pageOrganism.ts）：

// 通用组件Props类型
export interface PageOrganismProps {
  data: any; // 推荐替换为data的具体类型（比如PageData），避免使用any
}

// 可选：定义data的具体结构（更严谨的做法）
export type PageData = {
  slug: string;
  title: string;
  // 根据业务需求添加其他字段
};

2. 约束动态组件的类型 #

在页面组件中，通过dynamic的泛型参数明确组件的类型为React.ComponentType<PageOrganismProps>：

import dynamic from 'next/dynamic';
import { PageOrganismProps, PageData } from '@/types/pageOrganism';

interface Props {
  params: { slug: string };
}

const Page = async ({ params }: Props) => {
  // 指定data的类型为PageData（如果已定义）
  const data: PageData = await getPage(params.slug);

  const PageComponent = dynamic<React.ComponentType<PageOrganismProps>>(() =>
    import(`@/components/organisms/${data.slug}`).then(
      (module) => module.default
    )
  );

  return (
    <div>
      <PageComponent data={data} />
    </div>
  );
};

export default Page;

3. 目标组件实现通用类型 #

在ContactUs等目标组件中，导入并使用通用Props类型：

import { PageOrganismProps } from '@/types/pageOrganism';

export default function ContactUs({ data }: PageOrganismProps) {
  console.log(data);
  return <div>{}</div>;
}

关键提示 #

• 尽量不要用any，定义data的具体类型能让TypeScript提供更严格的类型检查，减少潜在bug。
• 所有动态导入的组件必须遵循PageOrganismProps接口，确保传递的Props类型一致。

内容的提问来源于stack exchange，提问作者Niño Arenas