Next.js 13.5.2：服务端组件传函数至客户端组件报错求助

你遇到的核心问题是：Next.js 13+的组件模型里，服务端组件（默认创建的都是）不能直接把普通函数作为props传给客户端组件——因为服务端到客户端的props需要序列化，而普通函数做不到。错误提示里的"use server"不是给服务端组件加的，是给你要传递的函数加的，用来把它标记成Server Action，这样Next.js才会允许它跨组件传递并在服务端执行。

具体修改步骤： #

1. 把要传递的函数标记为Server Action

在你的服务端组件里，修改filterProductsByType函数，在函数内部最顶部加上"use server"声明：

// 服务端组件内的函数定义
async function filterProductsByType(event: React.MouseEvent<HTMLButtonElement>) {
  "use server"; // 必须放在函数第一行，单独声明

  // 这里写你的产品过滤逻辑，比如获取点击的按钮值、查询数据库等
  const typeName = (event.target as HTMLButtonElement).innerText;
  // ... 后续处理逻辑
}

如果这个函数逻辑比较复杂，也可以单独抽成一个文件（比如app/actions.ts），在文件顶部统一加"use server"：

// app/actions.ts
"use server";

export async function filterProductsByType(event: React.MouseEvent<HTMLButtonElement>) {
  // 过滤逻辑
  const typeName = (event.target as HTMLButtonElement).innerText;
  // ...
}

然后在服务端组件里导入这个函数：

import { filterProductsByType } from "./actions";

// 之后正常传递给FilterButtons组件
<FilterButtons productTypes={productTypes} handleClick={filterProductsByType} />

2. 调整客户端组件的类型定义

因为Server Action是异步函数，所以客户端组件的Props类型要对应修改：

// FilterButtons客户端组件
type Props = {
  productTypes: ProductType[];
  handleClick: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>; // 改为异步函数类型
};

export default function FilterButtons({ productTypes, handleClick }: Props) {
  return (
    <ButtonGroup className="ml-5">
      {productTypes.map((type: ProductType) => (
        <Button
          className="transition ease-in hover:scale-105"
          key={type.id}
          size="sm"
          onClick={handleClick}
        >
          {type.name}
        </Button>
      ))}
    </ButtonGroup>
  );
}

为什么之前的操作没用？ #

你给服务端组件加"use server"是无效的——这个指令是用来标记Server Action函数的，不是标记组件的。服务端组件默认就是在服务端运行的，不需要额外声明；只有当你需要把一个函数暴露给客户端组件调用时，才需要给这个函数加"use server"，让Next.js知道这是一个要在服务端执行的动作。

备选方案（如果过滤逻辑可以在客户端处理） #

如果你的产品过滤不需要访问服务端资源（比如数据库、敏感配置），可以把状态管理放到客户端组件里，不用传递服务端函数：

// FilterButtons客户端组件
"use client"; // 确保是客户端组件
import { useState } from "react";

type Props = {
  productTypes: ProductType[];
  initialProducts: Product[]; // 把初始产品列表传进来
  onFilterChange: (filteredProducts: Product[]) => void; // 可选：把过滤结果传给父组件
};

export default function FilterButtons({ productTypes, initialProducts, onFilterChange }: Props) {
  const [products, setProducts] = useState(initialProducts);

  const handleClick = (type: ProductType) => {
    const filtered = initialProducts.filter(p => p.typeId === type.id);
    setProducts(filtered);
    onFilterChange?.(filtered);
  };

  return (
    <ButtonGroup className="ml-5">
      {productTypes.map((type: ProductType) => (
        <Button
          className="transition ease-in hover:scale-105"
          key={type.id}
          size="sm"
          onClick={() => handleClick(type)}
        >
          {type.name}
        </Button>
      ))}
    </ButtonGroup>
  );
}

这种方式不需要Server Action，直接在客户端处理过滤逻辑，适合简单场景。

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