Next.js 構建失敗，因為“slug”未作為字符串提供

Question

我正在嘗試使用 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 數據類型有關？ 我應該明確地將其聲明為字符串嗎？ 我該怎么做？

Answer 1

NextJS getStaticPaths期望params object 上的每個屬性都是一個字符串。 您可以在源代碼中查看 NextJS 在何處引發此錯誤。

您還在這里正確定義了slug類型（但未使用？）：

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

在getStaticPaths return 語句中，您正在映射來自 Contentful 的數據：

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

因此，您首先需要確保為該params.slug屬性返回一個字符串。 此字段應具有驗證功能，並且需要作為內容內容 model 中的string 。

您還需要防御item.fields.slug返回undefined 。 根據我的經驗，當草稿自動保存為空的必填字段時，這可能會在 Contentful 中發生。

如果鏈中的任何引用無效， 可選的鏈接以防御性地短路表達式有時是有用的，即item?.fields?.slug但這里可能不需要，所以嘗試一個簡單的 OR 邏輯運算符。

這可能可以寫得更簡潔，但這樣的東西應該在你的getStaticPaths function 的主體中工作：

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