Next.js/Ant Design报错：元素类型无效，Title组件导入异常

错误信息 #

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

环境版本 #

• Ant Design：5.25.3
• Next.js：15.3.2

原代码 #

import Link from 'next/link';
import { Typography } from 'antd';
const { Title } = Typography;

export default function Header() {
  return (
    <div>
      <Title level={1}>
        <Link href='/'>Test</Link>
      </Title>
    </div>
  );
}

问题原因及解决方法 #

• 原因：Ant Design 5.x 版本中，Title 已改为独立导出的组件，不再作为 Typography 的子属性存在，通过 Typography 解构获取 Title 会得到 undefined，触发组件类型无效的错误。
• 解决方法：直接从 antd 包中导入 Title 组件即可：

修正后的代码：

import Link from 'next/link';
import { Title } from 'antd';

export default function Header() {
  return (
    <div>
      <Title level={1}>
        <Link href='/'>Test</Link>
      </Title>
    </div>
  );
}

如果需要同时使用 Typography 下的其他组件（如 Text、Paragraph），可以同时导入 Typography 和独立组件：

import Link from 'next/link';
import { Title, Typography } from 'antd';
const { Text, Paragraph } = Typography;

内容的提问来源于stack exchange，提问作者Mike Pacific