NextJS如何利用电影ID实现带参数的页面跳转及路由配置？

你的问题出在Link的href提前渲染时依赖了未初始化的状态，加上一些语法和组件用法错误，导致地址栏出现undefined。下面是具体修正方案：

核心问题 #

1. selectedMovie初始值为undefined，而Next.js的Link是预渲染的，页面加载时就会计算href，此时selectedMovie还没被赋值，所以会出现/movies?movieId=undefined。
2. 完全没必要用useState存储选中的电影ID——循环渲染每个电影链接时，直接用当前项的ID即可。
3. map函数里没有返回JSX元素（缺少return），会导致电影列表根本不渲染。
4. Next.js的Link组件不需要value属性，这是多余的。

修正后的代码 #

import Link from 'next/link'; // 别忘了导入Link组件！
import { useRouter } from "next/router";

export const getServerSideProps = async (context) => {
  const { id } = context.query;

  const res = await fetch(`${process.env.BACKEND_URL}/User/${id}`);
  const data = await res.json();

  const res2 = await fetch(`${process.env.BACKEND_URL}/User/${id}/movies`);
  const data2 = await res2.json();

  return {
    props: { user: data, movies: data2},
  };
}

function Page({ user, movies }) {
  const router = useRouter();

  return(
    <div className={styles.movies}>
      {/* 用隐式返回（去掉大括号），或者加上return */}
      {movies.map((item) => (
        <Link 
          key={item.movieId} 
          href={`/movies?movieId=${item.movieId}`} // 直接用当前item的ID
        >
          <a>{item.movie.name}</a>
        </Link>
      ))}
    </div>
  );
}

export default Page;

关键修改说明 #

• 移除useState和onClick：不需要通过点击事件来存储ID，循环时直接访问item.movieId就能拿到当前电影的ID，直接拼到href里。
• 修复map的返回问题：把map里的大括号{}改成小括号()，实现隐式返回JSX元素；或者保留大括号但加上return关键字。
• 正确导入Link组件：你的原代码里没导入Link，这会导致组件报错，必须补上。
• 简化Link属性：去掉多余的value和onClick，只保留key和href两个必要属性。

这样修改后，点击每个电影名称时，地址栏会正确显示/movies?movieId=xxx，跳转到对应的详情页。

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