Next.js服务组件使用客户端组件时报错：函数不能作为子元素

这个错误的核心是Next.js的服务端组件（Server Component）与客户端组件（Client Component）的交互限制：服务端组件传递给客户端组件的所有props（包括children）必须是可序列化的（比如字符串、数字、普通对象、JSX元素），而函数属于不可序列化的类型，无法在服务端渲染阶段被转换为可传输的格式，因此当你在服务端组件Packages中把函数作为children传给客户端组件SubscriptionDataFetcher时，就会触发报错。

根据你的业务需求，有三种可行的处理方式：

方案一：将数据消费逻辑改为独立客户端组件 #

把原本在Packages中写的函数子组件，拆成一个单独的标记"use client"的组件，让SubscriptionDataFetcher把数据通过props传给它，避免服务端传递函数：

1. 创建独立客户端组件PackageContent：

"use client";

// 定义props类型，和你的SubscriptionData字段对应
interface PackageContentProps {
  x: 你的X类型;
  y: 你的Y类型;
}

const PackageContent: React.FC<PackageContentProps> = ({ x, y }) => {
  // 这里写原本的渲染逻辑
  return (
    <div>
      {x} - {y}
    </div>
  );
};

export default PackageContent;

2. 修改服务端组件Packages：

export const dynamic = 'force-dynamic';
import SubscriptionDataFetcher from './SubscriptionDataFetcher';
import PackageContent from './PackageContent';

const Packages: React.FC = () => {
  return (
    <SubscriptionDataFetcher>
      {(data) => <PackageContent x={data.x} y={data.y} />}
    </SubscriptionDataFetcher>
  );
};

export default Packages;

方案二：用React Context共享数据（推荐保留服务端组件特性时使用） #

放弃render props模式，改用Context在客户端组件之间共享数据，服务端组件只负责渲染客户端组件的容器：

1. 修改SubscriptionDataFetcher组件，添加Context：

"use client";

import { createContext, useContext, useState, ReactNode, useEffect } from 'react';
import { trpc } from '../你的tRPC路径'; // 导入你的tRPC客户端

// 定义数据类型
interface SubscriptionData {
  x: 你的X类型;
  y: 你的Y类型;
}

// 创建Context
const SubscriptionDataContext = createContext<SubscriptionData | undefined>(undefined);

// 封装自定义Hook，方便子组件获取数据
export const useSubscriptionData = () => {
  const context = useContext(SubscriptionDataContext);
  if (!context) {
    throw new Error('useSubscriptionData必须在SubscriptionDataFetcher内部使用');
  }
  return context;
};

const SubscriptionDataFetcher: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [data, setData] = useState<SubscriptionData>({} as SubscriptionData);

  // 调用tRPC获取数据的逻辑
  useEffect(() => {
    const fetchData = async () => {
      const result = await trpc.subscription.getData.query(); // 替换成你的tRPC路由
      setData(result);
    };
    fetchData();
  }, []);

  return (
    <SubscriptionDataContext.Provider value={data}>
      {children}
    </SubscriptionDataContext.Provider>
  );
};

export default SubscriptionDataFetcher;

2. 创建客户端组件PackageContent消费数据：

"use client";

import { useSubscriptionData } from './SubscriptionDataFetcher';

const PackageContent: React.FC = () => {
  const { x, y } = useSubscriptionData();

  return (
    <div>
      {x} - {y}
    </div>
  );
};

export default PackageContent;

3. 修改服务端组件Packages：

export const dynamic = 'force-dynamic';
import SubscriptionDataFetcher from './SubscriptionDataFetcher';
import PackageContent from './PackageContent';

const Packages: React.FC = () => {
  return (
    <SubscriptionDataFetcher>
      <PackageContent />
    </SubscriptionDataFetcher>
  );
};

export default Packages;

方案三：将Packages改为客户端组件（最简单，适用于无需服务端特性的场景） #

如果Packages不需要保留服务端组件的能力（比如不需要直接访问数据库、保密配置等），直接给它加上"use client"标记，这样组件内部的函数就可以正常传给SubscriptionDataFetcher：

"use client"; // 添加客户端标记

export const dynamic = 'force-dynamic';

import SubscriptionDataFetcher from './SubscriptionDataFetcher';

const Packages: React.FC = () => {
  return (
    <SubscriptionDataFetcher>
      {({ x, y }) => (
        // 直接写渲染逻辑
        <div>{x} - {y}</div>
      )}
    </SubscriptionDataFetcher>
  );
};

export default Packages;

内容的提问来源于stack exchange，提问作者huud-e