NextJS 14中Shadcn UI navigationMenuTriggerStyle调用报错求助

首先明确：navigationMenuTriggerStyle 是专门给 NavigationMenuTrigger 组件设计的样式函数，你把它用在 NavigationMenuLink 上本身就不符合Shadcn的组件逻辑，这是出错的核心原因。

下面是具体排查和修复步骤：

1. 匹配组件与对应样式函数 #

Shadcn的NavigationMenu组件里，不同子组件对应专属样式函数：

• NavigationMenuTrigger → 用 navigationMenuTriggerStyle()
• NavigationMenuLink → 用 navigationMenuLinkStyle()

把错误的样式函数替换成对应组件的正确版本：

// 错误写法
<NavigationMenuLink className={navigationMenuTriggerStyle()}>导航链接</NavigationMenuLink>

// 正确写法
<NavigationMenuLink className={navigationMenuLinkStyle()}>导航链接</NavigationMenuLink>

2. 检查样式函数的导入 #

确保从Shadcn的NavigationMenu组件中正确导入了对应样式函数：

import { 
  NavigationMenu,
  NavigationMenuLink,
  navigationMenuLinkStyle, // 注意是这个，不是trigger的样式函数
} from "@/components/ui/navigation-menu";

3. 排查版本或组件定义问题 #

打开你的@/components/ui/navigation-menu.tsx文件，确认里面存在navigationMenuLinkStyle的定义：

// 查看文件内的导出
export const navigationMenuLinkStyle = cva(/* ...样式配置代码... */);

如果没有这个定义，要么更新Shadcn的NavigationMenu组件到最新版，要么手动补充对应的样式函数。

4. 确认函数调用格式 #

确保你是调用函数（带括号()），而不是直接引用函数本身：

• 正确：className={navigationMenuLinkStyle()}
• 错误：className={navigationMenuLinkStyle}

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