shadcn中NavigationMenuTrigger用asChild报错：React.Children.only仅接受单个子元素

问题原因 #

你遇到的React.Children.only expected to receive a single React element child错误，本质是NavigationMenuTrigger的asChild模式要求仅接收一个React元素作为直接子节点，但你的代码中，NavigationMenuTrigger内部的换行、空格被React解析成了额外的文本节点，导致它认为存在多个子元素（文本节点 + Button元素 + 文本节点）。

修复方法 #

只需确保NavigationMenuTrigger的直接子元素只有Button，消除所有多余的换行和空格即可，以下是两种可行写法：

写法1：紧凑排列代码 #

<NavigationMenuTrigger asChild><Button variant="outline"><CircleUserRound />test</Button></NavigationMenuTrigger>

写法2：用注释屏蔽换行文本节点 #

如果想保留代码格式的可读性，可以用空注释消除换行产生的文本节点：

<NavigationMenuTrigger asChild>{/* */}
  <Button variant="outline">
    <CircleUserRound />test
  </Button>{/* */}
</NavigationMenuTrigger>

额外排查点 #

如果上述方法仍未解决问题，可以检查：

• Button组件内部是否返回了多个未被包裹的元素（比如直接返回两个标签而没有用Fragment或容器包裹）
• CircleUserRound图标组件是否存在返回多个元素的情况

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