Clerk/Next.js中isLoaded始终为true，如何检测会话加载状态？

针对你遇到的useUser钩子初始isSignedIn始终为false、isLoaded始终为true，无法区分“加载中”和“未登录”的问题，可通过以下几种方案解决：

• 使用useAuth钩子替代useUser
useAuth提供了更精准的会话加载状态标识isLoading，该字段会在会话获取过程中保持true，加载完成后才切换为false，此时的isSignedIn才是真实的登录状态。示例代码：

  import { useAuth } from '@clerk/nextjs';
  
  function YourComponent() {
    const { isLoading, isSignedIn, user } = useAuth();
  
    if (isLoading) {
      // 会话加载中，展示加载UI
      return <div>加载中...</div>;
    }
  
    if (isSignedIn) {
      return <div>欢迎回来，{user.firstName}</div>;
    }
  
    // 确认未登录
    return <div>请登录后继续</div>;
  }
  

• 使用<ClerkLoading>全局加载组件
  Clerk内置的<ClerkLoading>组件可以直接包裹需要等待会话加载的内容，它会在会话未完成初始化时显示你指定的 fallback 加载界面，加载完成后再渲染内部内容：

  import { ClerkLoading } from '@clerk/nextjs';
  
  function RootComponent() {
    return (
      <ClerkLoading fallback={<div>正在初始化会话...</div>}>
        {/* 仅当会话加载完成后才会渲染这里的内容 */}
        <YourAppContent />
      </ClerkLoading>
    );
  }
  

• 辅助判断：结合user字段验证状态
  若坚持使用useUser，可以结合user字段判断：当isLoaded为true且user为null时，才是明确的未登录状态；如果isLoaded为false则是加载中。不过你遇到的初始isLoaded为true的情况，多发生在客户端 hydration 阶段，此时useAuth的isLoading会更可靠。

内容的提问来源于stack exchange，提问作者Hiếu Nguyễn