Next.js项目中如何通过Firebase随机ID实现动态路由映射

1. 创建动态路由页面 #

不管Firebase返回的ID是随机字符串还是数字组合，Next.js的动态路由都能直接匹配。根据你使用的路由体系创建对应页面：

• App Router：在app目录下新建[projectId]/page.js
• Pages Router：在pages目录下新建[projectId].js

2. 首页跳转逻辑 #

点击标题时，直接把Firebase文档的ID作为路由参数传入跳转链接：

import Link from 'next/link';

// 假设projects是从Firebase获取的项目数组
{projects.map(project => (
  <Link key={project.id} href={`/${project.id}`}>
    <h3>{project.title}</h3>
  </Link>
))}

3. 动态页面获取对应项目数据 #

App Router 实现（app/[projectId]/page.js）

// 导入你的Firebase初始化实例和方法
import { getDoc, doc, db } from '@/lib/firebase';

async function ProjectDetail({ params }) {
  // 从路由参数中拿到Firebase文档ID
  const { projectId } = params;
  // 构建文档引用
  const projectRef = doc(db, 'projects', projectId);
  const projectSnap = await getDoc(projectRef);

  if (!projectSnap.exists()) {
    return <div>该项目不存在</div>;
  }

  const projectData = projectSnap.data();
  return (
    <div>
      <h1>{projectData.title}</h1>
      <div>{projectData.content}</div>
    </div>
  );
}

export default ProjectDetail;

Pages Router 实现（pages/[projectId].js）

import { useRouter } from 'next/router';
import { getDoc, doc, db } from '@/lib/firebase';
import { useEffect, useState } from 'react';

function ProjectDetail() {
  const router = useRouter();
  const { projectId } = router.query;
  const [project, setProject] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 确保projectId存在再发起请求
    if (!projectId) return;

    const fetchProject = async () => {
      const projectRef = doc(db, 'projects', projectId);
      const projectSnap = await getDoc(projectRef);
      
      if (projectSnap.exists()) {
        setProject(projectSnap.data());
      }
      setLoading(false);
    };

    fetchProject();
  }, [projectId]);

  if (loading) return <div>加载中...</div>;
  if (!project) return <div>该项目不存在</div>;

  return (
    <div>
      <h1>{project.title}</h1>
      <div>{project.content}</div>
    </div>
  );
}

export default ProjectDetail;

4. 排查要点 #

• 确认Firebase的数据库权限配置允许读取projects集合下的文档
• 跳转时传递的project.id是Firebase文档的原生ID，而非自定义字段
• 动态路由的文件名必须用方括号包裹参数名（如[projectId]）

内容的提问来源于stack exchange，提问作者Omokefe Ovie David