Next.js 14构建报错：TypeScript无法向子组件传递数据

数据老陈

2026-6-27

服务端组件TypeScript构建失败：传递Props时出现无效默认导出错误

开发环境（Visual Studio）中代码无警告或错误，但执行构建时失败，无法向服务端子组件传递单个数据。以下是简化后的代码及报错信息：

父组件 Layout.tsx

import React from "react";
import Page from "./page";

export default function Layout() {
  return (
    <div>
      layout2
      <Page name="HI" />
    </div>
  );
}

子组件写法一及对应报错

import React from "react";

type Props = {
  name: string;
};

const Page: React.FC<Props> = (props) => {
  return (
    <div>
      <p>Test Page 1</p>
      <p>{props.name}</p>
    </div>
  );
};

export default Page;

报错信息：page.tsx存在无效默认导出，Type Props不合法

子组件写法二及对应报错

export default function Page({ name }: { name: string }) {
  return (
    <div>
      <p>{name}</p>
    </div>
  );
}

报错信息：page存在无效默认导出，类型"{name:string}"不合法

解决方法

调整TypeScript配置
确保tsconfig.json开启严格模式并包含必要的类型配置，示例配置如下：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "preserve",
    "strict": true,
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "lib": ["ESNext", "DOM", "DOM.Iterable"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

优化组件类型注解方式
服务端组件中建议避免使用React.FC，直接定义Props类型并为函数组件注解：

type PageProps = {
  name: string;
};

export default function Page({ name }: PageProps) {
  return (
    <div>
      <p>Test Page 1</p>
      <p>{name}</p>
    </div>
  );
}