Next.js Clerk Auth传参报错：仅允许纯对象从服务端组件传至客户端组件

1. 转换服务端获取的User对象为纯JS结构 #

Clerk的currentUser()返回的是带原型链的类实例，不符合Next.js对服务端→客户端组件传递数据的要求（只能传纯对象、基础类型）。解决核心是把实例转成纯对象，或者只提取你需要的字段：

方式A：只传需要的字段（推荐，减少冗余数据） #

如果只用到用户头像、名称、ID这类信息，直接解构提取：

// 服务端组件
import { currentUser } from '@clerk/nextjs/server';
import UserNav from './UserNav';

export default async function Layout() {
  const user = await currentUser();
  // 提取所需字段，生成纯对象
  const userData = user ? {
    id: user.id,
    fullName: user.fullName,
    avatar: user.imageUrl
  } : null;

  return (
    <div>
      <UserNav user={userData} />
    </div>
  );
}

方式B：完整转换为纯对象 #

如果需要完整的用户数据，用Object.assign或展开操作符剥离原型：

// 服务端组件
const user = await currentUser();
// 转成无原型的纯对象
const userData = user ? Object.assign({}, user) : null;
// 或者用展开语法：const userData = user ? { ...user } : null;

return <UserNav user={userData} />;

2. 客户端组件正常接收使用 #

客户端组件直接接收转换后的纯对象，同时保留你的下拉菜单状态逻辑：

// 客户端组件 UserNav.jsx
'use client';

import { useState } from 'react';

export default function UserNav({ user }) {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  if (!user) {
    return <a href="/sign-in">登录</a>;
  }

  return (
    <div className="relative">
      <button onClick={() => setDropdownOpen(!dropdownOpen)}>
        <img src={user.avatar} alt={user.fullName} className="w-8 h-8 rounded-full" />
        {/* 图标切换逻辑 */}
        {dropdownOpen ? '▲' : '▼'}
      </button>
      {dropdownOpen && (
        <div className="absolute right-0 mt-2 bg-white shadow-md p-2">
          <p>{user.fullName}</p>
          <a href="/sign-out" className="block mt-1">退出登录</a>
        </div>
      )}
    </div>
  );
}

3. 原理说明 #

Next.js禁止服务端组件传递带原型的类实例给客户端，因为这类数据无法被序列化。通过提取字段或转换为纯对象，既保留了服务端获取用户信息的优势（无需客户端额外请求、更安全），又符合框架的数据传递规则。

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