NextJS动态页面数据/Props传递异常问题排查

你的问题出在动态参数匹配和数据查找条件两个核心环节，具体错误点和修复方法如下：

1. 动态页面的参数名不匹配 #

你的动态页面文件名为[video].tsx，这意味着Next.js会将URL中对应的片段解析为params.video，而非你定义的params.id。

修复： #

修改VideoParams接口：

interface VideoParams {
  video: string; // 替换原来的id字段
}

同时在getServerSideProps中，使用params.video获取URL中的视频ID：

export async function getServerSideProps({ params }: { params: VideoParams }) {
  // ...其他代码
  console.log(params.video); // 现在能正确拿到视频ID
  // ...
}

2. 数据查找的字段不匹配 #

你在查找视频时用了item.link === params.id，但你的数据中不存在link字段，对应的正确字段是videoID，且参数需替换为修正后的params.video。

修复： #

修改getServerSideProps中的查找逻辑：

const video = json.find((item: any) => item.videoID === params.video);

3. 可选优化：Link组件的写法（Pages Router） #

如果你使用的是Next.js Pages Router，虽然as属性能生效，但更推荐标准化的query对象写法，避免路径拼接错误：

<Link
  href={{
    pathname: "/videos/normal/[video]",
    query: { video: item.videoID }
  }}
>
  <HoverVideoPlayer videoSrc={item.videoLink} />
</Link>

修复后的完整[video].tsx代码 #

import React from 'react';

const VideoPage = (props: {
  video: any;
}) => {
  if (!props.video) {
    return <p>Video not found</p>;
  }
  return (
    <div>
      <h1>{props.video.videoTitle}</h1>
    </div>
  );
};

interface VideoParams {
  video: string;
}

export async function getServerSideProps({ params }: { params: VideoParams }) {
  const res = await fetch('https://www.externalsource.com/VideoData.json');
  const json = await res.json();

  console.log(params.video);
  console.log(json); 

  const video = json.find((item: any) => item.videoID === params.video);

  console.log(video); 

  return {
    props: {
      video: video || null,
    },
  };
}

export default VideoPage;

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