0

我正在尝试使用 Next.js 和 typescript 创建一个博客，我遇到了 [slug].tsx 的问题，我不断收到以下错误：

发生构建错误错误：未在 getStaticPaths 中为 /blog/[slug] 提供所需参数（slug）作为字符串

我主要关注本教程，这是确切的时间戳：
https ://youtu.be/jJF6oBw1lbo?t=582

在我到达这部分之前，我成功地使用了 Typescript 而不是 javascript 中的教程，现在我无法执行构建。

当我尝试运行“yarn run dev”时，出现以下错误：

TypeError：无法读取未定义的属性“点击”

这是我的 [slug].tsx 代码：

import { GetStaticPaths, GetStaticProps } from 'next'

let client = require('contentful').createClient({
    space: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
})

type Params = {
    params: {
        slug: string
    }
}

export const getStaticPaths: GetStaticPaths = async () => {
    let data = await client.getEntries({
        content_type: 'article',
    });
    return {
        paths: data.items.map(item => ({
            params: {slug: item.fields.slug},
        })),
        fallback: true,
    }
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
    let data = await client.getEntries({
        content_type: 'article',
        'fields.slug': params.slug
    })
    return {
        props: {
            article: data.items[0]
        }
    }
}

export default function Article({ article }) {

    return <article>
        <h1>{article.fields.title}</h1>
        {article.fields.content}
    </article>

}

问题是否与 slug 数据类型有关？我应该明确地将其声明为字符串吗？我该怎么做？

4

1 回答 1

0

NextJSgetStaticPaths期望params对象上的每个属性都是一个字符串。您可以在源代码中查看 NextJS 在何处引发此错误。

您还在slug这里正确定义了该类型（但未使用？）：

type Params = {
    params: {
        slug: string
    }
}

在getStaticPathsreturn 语句中，您正在映射来自 Contentful 的数据：

params: {slug: item.fields.slug},

因此，您首先需要确保为该params.slug属性返回一个字符串。此字段应具有验证功能，并且string在您的 Contentful 内容模型中是必需的。

您还需要防御该item.fields.slug返回undefined。根据我的经验，当草稿自动保存为空的必填字段时，这可能会在 Contentful 中发生。

如果链中的任何引用无效，可选链接以防御性地短路表达式有时是有用item?.fields?.slug的，但这里可能不需要，所以尝试一个简单的 OR 逻辑运算符。

这可能可以写得更简洁，但这样的东西应该在你的函数体中getStaticPaths起作用：

const paths = data.items.reduce((pagePaths, item) => {
  const slug = item.fields.slug || '';

  if (slug.length > 0) {
    pagePaths.push({
      params: { slug },
    });
  }

  return pagePaths;
}, []);

return {
  paths,
  fallback: false,
};
于 2021-07-14T03:17:10.063 回答