Next.js 13.0.5报错：函数无法直接传给客户端组件，如何解决？

报错含义 #

Next.js 13 App Router 区分了服务器组件和客户端组件：

• 服务器组件默认在后端运行，props 需要序列化后传输到前端
• 客户端组件在浏览器端运行，组件间可以直接传递函数

你遇到的报错，本质是在服务器组件里定义了包含函数的matchesColumns，然后传给了客户端组件Tabela2。函数无法被序列化传输，所以 Next.js 阻止了这种传递。

注意："use server"是用来标记后端执行的服务器函数（比如表单提交逻辑），你的renderCell是前端UI渲染函数，完全不需要在后端运行，用"use server"根本不适用。

两种解决方法 #

方法一：将父组件转为客户端组件 #

如果父组件不需要保留服务器组件的特性，直接在父组件文件顶部添加'use client'指令，让父组件和Tabela2都成为客户端组件，此时函数可以直接传递：

'use client'; // 必须加在文件最顶部

import Link from 'next/link';
import Tabela2 from './Tabela2';

// ...其他逻辑
let matchesColumns = [];
matchesColumns.push({ 
  field: 'pk', 
  headerName: "", 
  flex: 0.3, 
  renderCell: (params) => (<Link href={`/matches/${encodeURIComponent(params.row.pk)}`}>Details</Link>) 
});

// ...其他逻辑
return <Tabela2 rows={matchesRows} columns={matchesColumns}/>;

方法二：父组件保留服务器组件，将渲染逻辑移到客户端组件 #

如果父组件必须是服务器组件，不要传递包含函数的columns，只传配置数据，在Tabela2内部生成渲染函数：

父组件（服务器组件）：

// 不需要加'use client'
let matchesColumns = [];
matchesColumns.push({ 
  field: 'pk', 
  headerName: "", 
  flex: 0.3,
  // 只传递配置信息，不含函数
  linkConfig: {
    path: (row) => `/matches/${encodeURIComponent(row.pk)}`,
    text: 'Details'
  }
});

return <Tabela2 rows={matchesRows} columns={matchesColumns}/>;

Tabela2 组件（客户端组件）：

'use client';

import Link from 'next/link';

function Tabela2({ rows, columns }) {
  // 在客户端组件内部生成渲染函数
  const processedColumns = columns.map(col => {
    if (col.linkConfig) {
      return {
        ...col,
        renderCell: (params) => (
          <Link href={col.linkConfig.path(params.row)}>
            {col.linkConfig.text}
          </Link>
        )
      };
    }
    return col;
  });

  // 使用处理后的columns渲染表格
  return (
    {/* 你的表格渲染逻辑，替换为processedColumns */}
  );
}

export default Tabela2;

内容的提问来源于stack exchange，提问作者Rafał Kamiński