Next.js 构建失败，因为“slug”未作为字符串提供答案

【问题标题】：Next.js build fail because "slug" was not provided as stringNext.js 构建失败，因为“slug”未作为字符串提供
【发布时间】：2021-07-23 14:52:32
【问题描述】：

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

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

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

我成功地按照 Typescript 而不是 javascript 完成了教程，直到我到达这一部分，现在我无法执行构建。

当我尝试运行“yarn run dev”时，我得到了这个错误：

TypeError: 无法读取未定义的属性“tap”

这是我的 [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 数据类型有关？我应该明确地将其声明为字符串吗？我该怎么做？

【问题讨论】：

对于第一个错误，在将item.fields.slug设置为路径之前确保它没有返回undefined。
@juliomalves 我将如何测试这个？

标签： javascript typescript next.js typeerror

【解决方案1】：

NextJS getStaticPaths 期望 params 对象上的每个属性都是一个字符串。你可以在source code 中看到 NextJS 在哪里抛出这个错误。

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

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

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

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

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

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

Optional chaining 在链中的任何引用无效时防御性地短路表达式有时是有用的，即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,
};

【讨论】：