Next.js 动态路由错误：提供的路径 `page-name` 与页面不匹配：`/[slug]`

Posted 2023-03-30

【中文标题】Next.js 动态路由错误：提供的路径 `page-name` 与页面不匹配：`/[slug]`

【英文标题】：Next.js dynamic route error: The provided path `page-name` does not match the page: `/[slug]`

【发布时间】：2021-01-03 17:40:22

【问题描述】：

我正在尝试使用[slug].js 通过getStaticProps 和getStaticPaths 呈现与index.js 相邻的页面。使用动态路由导航到页面后，我收到不匹配错误。即使提供的路径确实与页面 slug 和页面道具内容匹配，也会发生此错误。

当index.js 被复制并重命名为page-name.js（例如about.js）时，页面呈现良好，所以我认为问题在于我如何使用getStaticPaths。实际上，我并不完全理解getStaticProps 和getStaticPaths 之间的关系。是否有一些映射允许引擎在给定地图中的任何路径的情况下查找适当的道具？

Index.js

import Link from 'next/link';
import  getPageDataBySlug  from '../lib/api';

export default function Page(pageData) 
  const page = pageData;
  return (
    <>
      <h1>document title is: page.documentTitle</h1>
      <Link href="/[slug]" as="/about">
        <a>
          <h5>Link to About</h5>
        </a>
      </Link>
    </>
  );


export async function getStaticProps() 
  const props = await getPageDataBySlug('home');
  return 
    props
  ;

[slug].js

import Link from 'next/link';
import  getPageDataBySlug, getApiDataPaths  from '../lib/api';

export default function Page(pageData) 
  const page = pageData;

  return (
    <>
      <h1>document title is: page.documentTitle</h1>
      <Link href="/" as="/">
        <a>
          <h5>Link to Home</h5>
        </a>
      </Link>
    </>
  );


// Only grab the entry for this page
export async function getStaticProps( params ) 
  const props = await getPageDataBySlug(params.slug);
  return 
    props
  ;


export async function getStaticPaths() 
  const apiDataPaths = await getApiDataPaths();
  return 
    paths: apiDataPaths?.map(( slug ) => `$slug`) ?? [],
    fallback: false
  ;

getStaticProps 返回正确的页面内容

  "title": "About",
  "slug": "about",
  "description": "About page description",
  "documentTitle": "Pithy Compelling Headline",
  "article": 
    "content": [[Object], [Object]],
  

getApiDataPaths() 返回

[
   slug: 'about' ,
   slug: 'another-page' ,
   slug: 'yet-another' 
]

getStaticPaths() 映射以数组形式返回 paths：

[
  'about',
  'another-page',
  'yet-another'
]

我在这里缺少什么？ getStaticPaths应该只是当前页面的路径吗？

FWIW 我使用 Contentful 作为 API，并且运行良好。

【参考方案1】：

Next Js Docs 帮助找到错误。 这就是你出错的地方。您正在以这种格式传入一个对象数组：

[id:1, id:2]

当 getStaticPaths 期待这个时：

[
     params:  id: '1'  ,
     params:  id: '2'  
]

解决方案：

  export async function getStaticPaths() 

  const apiDataPaths = await getApiDataPaths();
  // Empty arr to build new paths
  const newPaths = [];
  // Add params to every slug obj returned from api
  for (let slug of apiDataPaths) 
    newPaths.push( params:  ...slug  );
  
  // Return paths to render components
  return 
    paths: newPaths,
    fallback: true
  ;

你也可以考虑清理服务器端的数据。

【讨论】：

非常感谢！这按预期工作，尽管我仍然不了解 getStaticPaths 和 getStaticProps 之间的关系......一切都很好。