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

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

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

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
  };
}

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
  };
}

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

getapidatapath（）返回

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
  };
}

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
  };
}

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

而getStaticPaths（）映射将“路径”作为数组返回：

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

我错过了什么？GetStaticPath是否应仅显示当前页面的路径

（FWIW我正在使用Contentful作为API，它工作得非常好。）

帮助查找错误。 这就是你错的地方。您正在以以下格式传入一个对象数组：

[{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
  };
}

---

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

非常感谢！这正如预期的那样工作，尽管我仍然没有探究GetStaticPath和getStaticProps之间的关系……所有这些都是及时的。