Next.js部署Firebase后复制URL跳转动态路由失效求助

你的问题核心是本地测试正常，但部署到Firebase后直接访问/profiles/[id]会被重定向到仪表板，且希望该页面能像Instagram个人资料页一样公开可访问，下面是几个必查的解决方向：

1. 排查全局登录拦截逻辑 #

你说移除了页面的Auth钩子，但全局层面的登录检查才是重定向的大概率原因：

• 检查_app.js（Pages Router）或根layout.js（App Router）：如果里面有未登录时强制跳转到仪表板的代码，一定要给/profiles/*路由开特例。比如：

  // _app.js 示例修改
  import { useAuthState } from 'react-firebase-hooks/auth';
  import { auth } from '@/firebase';
  import UserDashboard from './dashboard';
  
  function MyApp({ Component, pageProps }) {
    const [user, loading] = useAuthState(auth);
  
    if (loading) return <p>Loading...</p>;
    // 仅对非/profiles路由做登录校验
    if (!user && !window.location.pathname.startsWith('/profiles')) {
      return <UserDashboard />;
    }
  
    return <Component {...pageProps} />;
  }
  

• 如果项目有middleware.js：检查全局重定向规则，确保/profiles路由被排除。比如：

  // middleware.js 示例
  import { NextResponse } from 'next/server';
  
  export function middleware(request) {
    const authCookie = request.cookies.get('auth-token');
    // 未登录时仅拦截非/profiles的路由
    if (!authCookie && !request.nextUrl.pathname.startsWith('/profiles')) {
      return NextResponse.redirect(new URL('/dashboard', request.url));
    }
    return NextResponse.next();
  }
  
  export const config = {
    matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
  };
  

2. 修正Firebase Hosting的路由配置 #

Next.js动态路由需要Firebase正确转发请求，否则直接访问会返回404，进而被重定向到首页：

• 打开firebase.json，检查hosting的rewrites规则：
  因为你的页面用了getServerSideProps（SSR），不能用静态导出，必须配置Firebase Functions处理SSR请求：

  {
    "hosting": {
      "public": ".next/public",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "function": "nextServer"
        }
      ]
    },
    "functions": {
      "source": ".next"
    }
  }
  

• 确保部署命令正确：执行npm run build后再firebase deploy，Firebase会自动创建处理SSR的函数。

3. 修复动态路由参数传递错误 #

你的路由文件是[uniqueId].js，但getServerSideProps里取的是params.uid，这会导致uid参数为空，页面加载失败后可能触发全局重定向：
修改getServerSideProps：

export async function getServerSideProps({ params }) {
  return {
    props: {
      uid: params.uniqueId, // 这里要和路由文件名的[uniqueId]对应
    },
  };
}

4. 开放Firestore文档的读取权限 #

要让未登录用户能看到资料，必须允许所有人读取users集合的文档：
在Firebase控制台的Firestore规则页面，更新规则为：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read: if true; // 开放读取权限
      allow write: if request.auth != null && request.auth.uid == userId; // 仅用户自己可修改
    }
  }
}

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