NextJS中传递React Icon作为客户端组件Props时遇函数传递错误求助

问题原因 #

你遇到的错误是Next.js App Router的组件规则导致的：服务器组件不能将函数/组件类型的props传递给客户端组件。你的Button是客户端组件（带'use client'），如果调用它的父组件是服务器组件（没有'use client'），直接传递React Icon（本质是函数组件）就会触发这个报错。

注意：不要尝试给React Icon加'use server'——React Icon依赖客户端特性（比如hooks），标记为服务器组件会引发更多错误，完全不可行。

解决方案 #

方案1：将调用Button的父组件改为客户端组件

在调用Button的页面/组件顶部添加'use client'，让父组件变成客户端组件，这样就能正常传递Icon组件作为props：

'use client';
import Button from './Button';
import { FaHome } from 'react-icons/fa';

export default function HomePage() {
  return <Button Icon={FaHome}>首页</Button>;
}

方案2：将Icon作为子元素传递（兼容服务器组件）

修改Button组件，不再接收Icon作为props，而是让父组件把Icon和文本一起作为children传入。这种方式支持在服务器组件中调用Button：

修改后的Button组件：

'use client';

interface ButtonProps {
  children: React.ReactNode;
}

export default function Button(props: ButtonProps) {
  const { children } = props;

  return <button>{children}</button>;
}

调用方式：

// 父组件可以是服务器组件（无需'use client'）
import Button from './Button';
import { FaHome } from 'react-icons/fa';

export default function HomePage() {
  return (
    <Button>
      <FaHome />
      首页
    </Button>
  );
}

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