Auth0+Next.js App Router动态路由下的用户认证问题

问题原因 #

你遇到的类型错误是因为withPageAuthRequired要求传入的组件参数类型为AppRouterPageRouteOpts，其中params字段是Record<string, string | string[]> | undefined，但你定义的UserDashboard组件强制要求params为必填的{ user_id: string }，两者类型不兼容。

解决方案 #

1. 调整组件参数类型并添加校验 #

修改UserDashboard组件的参数类型为AppRouterPageRouteOpts，并在组件内部对params和user_id做存在性校验：

import { AppRouterPageRouteOpts } from '@auth0/nextjs-auth0/client';

const UserDashboard = ({ params }: AppRouterPageRouteOpts) => {
  // 校验参数有效性，避免类型错误
  if (!params || typeof params.user_id !== 'string') {
    return <div>无效的用户ID</div>;
  }

  const user_id = params.user_id;
  // 页面剩余逻辑
  return (
    <div>
      <h1>用户仪表盘：{user_id}</h1>
      {/* 其他页面内容 */}
    </div>
  );
};

2. 优化withPageAuthRequired配置 #

你的withPageAuthRequired核心逻辑没问题，可保留并添加兜底返回路径：

export default withPageAuthRequired(UserDashboard, {
  returnTo: ({ params }) => {
    if (params?.user_id && typeof params.user_id === 'string') {
      return `${process.env.NEXT_PUBLIC_BASE_URL}/user-dashboard/${params.user_id}`;
    }
    // 参数无效时返回首页
    return '/';
  }
});

3. generateMetadata的类型兼容说明 #

generateMetadata的参数由Next.js路由系统提供，动态路由会保证params.user_id存在，原代码无需修改，若要更严谨可添加校验：

export async function generateMetadata({
  params,
}: { params: { user_id: string }; }) {
  if (!params?.user_id) {
    return { title: '用户仪表盘' };
  }
  return {
    title: 'User Dashboard',
    description: `Dashboard for User: ${params.user_id}`,
  };
}

补充说明 #

withPageAuthRequired确实是Auth0官方推荐的Next.js App Router页面登录校验方案，它会自动将未登录用户重定向到Auth0登录页，登录成功后返回你配置的returnTo路径，完全匹配你的需求。

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