Next.js从静态文件生成动态链接后Props获取异常问题

问题核心 #

你当前的实现存在三个关键问题：

• 动态路由配置不符合Next.js规范
• Link组件的参数传递方式错误
• 动态页面的数据获取逻辑未关联完整静态数据

解决方案 #

步骤1：修正动态路由结构 #

在pages/blog目录下创建**[id].js**文件（用id作为路由标识比title更可靠，避免重复或编码问题）。

步骤2：优化Posts页面的Link组件 #

修改链接生成逻辑，通过query传递文章唯一id，as参数保留美化后的URL：

// 先抽离静态数据到单独文件（比如data/blogPosts.js），方便复用
import { blogPosts } from '../../data/blogPosts';

// ... 其他代码 ...

{ filteredList.map((post) => (
  <div key={`post-${post.id}`}>
    <Link
      href={{
        pathname: "/blog/[id]", // 对应动态路由文件
        query: { id: post.id } // 传递唯一标识
      }}
      as={`/blog/${encodeURIComponent(post.title)}`} // 美化URL
    >
      <a>{post.title}</a>
    </Link>
  </div>
))}

步骤3：重构动态页面（[id].js） #

通过getStaticPaths预渲染所有路径，getStaticProps根据id匹配完整文章数据：

import styles from '../../styles/global.module.scss';
import { blogPosts } from '../../data/blogPosts';

const Post = ({ post }) => {
  if (!post) return <div>文章不存在</div>;

  const { title, subTitle, body } = post;
  const firstSentence = body.split(' ').slice(0, 30).join(' ') + "...";

  return (
    <div className={styles.postContainer}>
      <h1 className={styles.heading}>{title}</h1>
      {subTitle && <h2 className={styles.heading2}>{subTitle}</h2>}
      <div className={styles.blogBody}>
        <p className={styles.blogText}>{firstSentence}</p>
      </div>
    </div>
  );
};

// 预定义所有需要渲染的动态路径
export async function getStaticPaths() {
  const paths = blogPosts.map(post => ({
    params: { id: post.id.toString() }
  }));

  return { paths, fallback: false }; // 未匹配路径返回404
}

// 根据路由参数获取对应文章数据
export async function getStaticProps({ params }) {
  const post = blogPosts.find(item => item.id.toString() === params.id);
  
  return { props: { post } };
}

export default Post;

步骤4：抽离静态数据（可选但推荐） #

创建data/blogPosts.js文件统一管理文章数据：

export const blogPosts = [
  {
    title: "blabla",
    subTitle: "toto ",
    body: "the text of my body",
    id: 1
  },
  {
    title: "blabla2",
    subTitle: "toto2 ",
    body: "the text of my body2",
    id: 2
  },
  // 其他文章...
];

之后在Posts页面和动态页面直接导入即可。

关键逻辑说明 #

• Next.js动态路由必须以[param].js命名文件，param对应URL中的动态片段
• getStaticPaths用于预渲染所有静态路径，适合数据固定的场景
• getStaticProps根据路由参数匹配完整数据，传递给页面组件
• 用id作为匹配标识比title更稳定，避免重复标题或URL编码冲突

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