NextJS报错Unsupported Server Component type: undefined的原因及解决

开发者阿泽

2026-6-21

问题：Next.js添加'use client'后出现"Error: Unsupported Server Component type: undefined"

我在编写Next.js项目时，给NavLinks组件添加'use client'指令后，出现错误提示：

Error: Unsupported Server Component type: undefined

涉及代码如下：

'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
 
// ...
 
export default function NavLinks() {
  const pathname = usePathname();
 
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className={clsx(
              'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
              {
                'bg-sky-100 text-blue-600': pathname === link.href,
              },
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

错误原因

核心问题是代码中省略的links数组里，icon字段的值未正确关联到导入的Heroicons图标组件，导致const LinkIcon = link.icon得到的是undefined。
在客户端组件中，React无法渲染undefined类型的元素，因此抛出该错误。添加'use client'后，组件从服务器组件转为客户端组件，原本服务器端的容错逻辑不再生效，错误直接暴露。

解决方法

确保links数组的icon字段正确引用已导入的图标组件，示例如下：

// 在'use client'组件的同一文件内定义links数组
const links = [
  { name: '主页', href: '/', icon: HomeIcon },
  { name: '团队', href: '/team', icon: UserGroupIcon },
  { name: '文档', href: '/docs', icon: DocumentDuplicateIcon },
];