Next.js 14.2.17中generateStaticParams传递查询参数失效问题

父页面是客户端组件（使用use client和useEffect），展示项目列表。点击项目时通过Link组件传递squad_id和user_id作为查询参数：

<Link
    key={index}
    prefetch={true}
    href={{
        pathname: `/project/client-projects/${clientProject.project_id}`,
        query: {
            squad_id: clientProject.vendor_squad_id,
            user_id: clientProject.user_id
        }
    }}
>
    {/* 项目内容 */}
</Link>

目标页面的generateStaticParams尝试从参数中获取这两个值：

export async function generateStaticParams({
params: { squad_id, user_id },
}: {
params: { squad_id: string, user_id: string }
}) {

console.log(`id on params ${squad_id}`);

const response = await getClientProjectApi({
    "vendor_squad_id": squad_id,
    "user_id": user_id,
    "sort_by": "newest_first",
});

return response.allProjects?.data?.map((project: any) => ({
    projectid: project["project_id"],
    workid: project["work_id"]
}))}

最终出现错误：Error: Required param "squad_id" was not provided

核心原因 #

generateStaticParams是Next.js静态构建阶段运行的函数，它只能读取路由路径中定义的动态参数（比如/project/client-projects/[projectid]里的projectid），完全无法访问URL的查询参数（?squad_id=xxx&user_id=xxx）。

从你的文件夹结构来看，路由是project/client-projects/[projectid]，所以generateStaticParams的params对象里只有projectid，没有squad_id和user_id，这就是报错的根本原因。

解决方案 #

方案1：将参数放入路由路径（推荐） #

如果这两个参数是静态生成页面必需的，修改路由结构，把squad_id和user_id加入路径参数：

1. 调整文件夹结构为：project/client-projects/[squad_id]/[user_id]/[projectid]
2. 修改父页面的Link：

<Link
    key={index}
    prefetch={true}
    href={`/project/client-projects/${clientProject.vendor_squad_id}/${clientProject.user_id}/${clientProject.project_id}`}
>
    {/* 项目内容 */}
</Link>

3. 更新generateStaticParams：

export async function generateStaticParams() {
    // 先获取所有可能的squad_id和user_id组合
    const squadsAndUsers = await getAllSquadsAndUsers();
    
    const params = [];
    for (const { squad_id, user_id } of squadsAndUsers) {
        const response = await getClientProjectApi({
            "vendor_squad_id": squad_id,
            "user_id": user_id,
            "sort_by": "newest_first",
        });
        const projectParams = response.allProjects?.data?.map((project: any) => ({
            squad_id: squad_id.toString(),
            user_id: user_id.toString(),
            projectid: project["project_id"].toString()
        })) || [];
        params.push(...projectParams);
    }
    return params;
}

这样generateStaticParams就能从路径中拿到squad_id和user_id，用于静态生成对应页面。

方案2：改用动态渲染（无需静态生成场景） #

如果页面不需要静态生成，去掉generateStaticParams，改用客户端组件获取查询参数：

'use client';
import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function ClientProjectPage() {
    const searchParams = useSearchParams();
    const [projects, setProjects] = useState([]);
    
    useEffect(() => {
        const squad_id = searchParams.get('squad_id');
        const user_id = searchParams.get('user_id');
        
        if (squad_id && user_id) {
            getClientProjectApi({
                "vendor_squad_id": squad_id,
                "user_id": user_id,
                "sort_by": "newest_first",
            }).then(res => {
                setProjects(res.allProjects?.data || []);
            });
        }
    }, [searchParams]);
    
    return (
        <div>
            {/* 渲染项目列表 */}
        </div>
    );
}

这种方式页面为动态渲染，每次请求都会读取查询参数并拉取数据。

方案3：预生成所有参数组合（参数范围有限场景） #

如果squad_id和user_id的取值范围很小，可以预先获取所有可能的组合，在generateStaticParams中遍历生成所有页面：

export async function generateStaticParams() {
    // 假设已获取所有可能的squad_id和user_id
    const allSquadIds = ['squad_001', 'squad_002'];
    const allUserIds = ['user_001', 'user_002'];
    
    const params = [];
    for (const squad_id of allSquadIds) {
        for (const user_id of allUserIds) {
            const response = await getClientProjectApi({
                "vendor_squad_id": squad_id,
                "user_id": user_id,
                "sort_by": "newest_first",
            });
            const projectParams = response.allProjects?.data?.map((project: any) => ({
                projectid: project["project_id"],
                squad_id,
                user_id
            })) || [];
            params.push(...projectParams);
        }
    }
    return params;
}

// 页面组件接收静态生成的参数
export default function ClientProjectPage({ params }: { params: { projectid: string, squad_id: string, user_id: string } }) {
    // 使用params中的数据渲染页面
    return <div>{/* 页面内容 */}</div>;
}

该方案适合参数组合有限的场景，可一次性静态生成所有可能的页面。

内容的提问来源于stack exchange，提问作者ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ