Next 13中如何将组件作为Props传递？遇报错求解决方案

你遇到的问题是Next.js App Router的组件序列化限制导致的：服务器组件无法将函数/React组件（比如react-icons的图标组件）直接传递给客户端组件，因为服务器端只能传递可序列化的数据（比如字符串、数字、普通对象等）。下面是几个无需启用实验性标志的解决方案：

1. 确保Tab组件是显式的客户端组件 #

虽然你提到Tab是客户端组件，但要确认组件顶部添加了'use client'指令——App Router中所有组件默认是服务器组件，必须显式声明才能成为客户端组件，这样它才能接收并渲染其他客户端组件（比如Icon）：

'use client'; // 必须添加这一行
import * as React from "react";
import type { IconType } from "react-icons";

type TabProps = {
  Icon: IconType;
  label: string;
  isActive?: boolean;
};

export default function Tab({
  Icon,
  label,
  isActive = false,
  ...props
}: TabProps) {
  return (
    <div>
      <Icon size={20} />
      {label}
    </div>
  );
}

2. 调整父组件的处理方式（如果父组件是服务器组件） #

如果使用Tab的父组件是服务器组件，不能直接传Icon组件作为props，有两种可行处理方式：

方式一：将父组件改为客户端组件 #

在父组件顶部同样添加'use client'，这样父组件就能直接导入并传递Icon组件给Tab：

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

export default function Parent() {
  return <Tab Icon={FaHome} label="首页" />;
}

方式二：传递图标标识，在Tab内部动态导入 #

如果不想把父组件改成客户端组件，可以传递图标的名称/标识，在Tab组件内部动态加载对应的图标：

'use client';
import * as React from "react";

type TabProps = {
  iconName: string; // 改为传递图标名称，比如"FaHome"
  label: string;
  isActive?: boolean;
};

export default function Tab({
  iconName,
  label,
  isActive = false,
  ...props
}: TabProps) {
  const [Icon, setIcon] = React.useState<React.ElementType | null>(null);

  React.useEffect(() => {
    // 动态导入对应的图标组件
    import(`react-icons/fa/${iconName}`).then(module => {
      setIcon(module[iconName]);
    });
  }, [iconName]);

  if (!Icon) return null; // 加载完成前可添加自定义加载态

  return (
    <div>
      <Icon size={20} />
      {label}
    </div>
  );
}

然后父组件（服务器组件）可以这样使用：

import Tab from './Tab';

export default function Parent() {
  return <Tab iconName="FaHome" label="首页" />;
}

3. 额外说明 #

react-icons的所有组件本身都是客户端组件，所以只要确保接收它们的组件也是客户端组件，并且传递行为是在客户端组件之间进行，就不会触发这个序列化错误。旧版React（比如Next.js Pages Router）没有服务器组件的概念，因此不存在这个限制，这也是你之前能正常使用的原因。

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