Next.js 14中使用Clerk的useUser钩子报错：不是函数

核心问题 #

你在app\home\page.tsx中定义的是异步服务器组件（async () => {}），而Clerk的useUser是客户端React钩子，只能在客户端组件中使用，服务器组件无法调用任何React Hooks，因此出现useUser is not a function的错误——这本质是服务器环境下无法识别客户端钩子的调用。

两种解决方式 #

方式1：将page转为客户端组件

在page.tsx顶部添加'use client'指令，将组件转为客户端组件，即可正常使用useUser钩子：

'use client';
import { useUser } from "@clerk/nextjs";

const Page = () => {
  const { isSignedIn, user, isLoaded } = useUser();
  
  // 你的组件渲染逻辑
  return (
    <div>
      {isLoaded ? (
        isSignedIn ? <p>欢迎，{user?.fullName}</p> : <p>请登录</p>
      ) : <p>加载中...</p>}
    </div>
  );
};
export default Page;

说明：若需要在客户端组件中执行异步操作，可以保留async，但钩子必须在组件顶层调用（不能在异步函数内）。

方式2：在服务器组件中使用Clerk服务器端API

如果需要保持page.tsx为服务器组件，可直接使用Clerk提供的服务器端方法获取用户信息，无需依赖客户端钩子：

import { auth, currentUser } from "@clerk/nextjs/server";

const Page = async () => {
  const { userId } = auth();
  const user = userId ? await currentUser() : null;
  const isSignedIn = !!userId;

  // 服务器端直接使用用户数据，无需等待加载状态
  return (
    <div>
      {isSignedIn ? <p>欢迎，{user?.fullName}</p> : <p>请登录</p>}
    </div>
  );
};
export default Page;

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