Next.js 的 getStaticPaths 抛出“TypeError: segment.replace is not a function”

Question

我是 Next.Js 的 getStaticPaths 新手，现在收到此错误，不知道如何处理。

这是我的代码（我使用的是来自“serverless-mysql”的 query）：

export async function getStaticPaths() {
    const userIds = await query(/* sql */`
          SELECT userId FROM user_table_v3test
      `);
    const mappedIds = JSON.parse(JSON.stringify(userIds.map(id => ({ params: { slug: [id.userId]}}))));

    return {
        paths: [
            { params: { slug: [] } },
            ...mappedIds
        ],
        fallback: false
    };
}

这将返回此错误（在每个页面上）：

Server Error
TypeError: segment.replace is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.

在我的控制台中，日志如下：

Uncaught     at escapePathDelimiters (file://C:\Users\robbert.olierook\Documents\pom_v1\node_modules\next\dist\next-server\lib\router\utils\escape-path-delimiters.js:2:55)
    at Array.map (<anonymous>)
    at <unknown> (file://C:\Users\robbert.olierook\Documents\pom_v1\node_modules\next\dist\build\utils.js:21:1117)
    at Array.forEach (<anonymous>)
    at <unknown> (file://C:\Users\robbert.olierook\Documents\pom_v1\node_modules\next\dist\build\utils.js:21:502)
    at Array.forEach (<anonymous>)
    at buildStaticPaths (file://C:\Users\robbert.olierook\Documents\pom_v1\node_modules\next\dist\build\utils.js:17:1252)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

我尝试了几件事。

我将 mappedIds 包裹在愚蠢的 parse/stringify 构造中的原因是因为这个问题： https://github.com/vercel/next.js/issues/11993

这似乎是必要的，因为当我在 mappedIds 的所有逻辑中省略 getStaticPaths 并在 getStaticProps 中使用相同的逻辑时，我可以通过 {{1}作为道具，我需要将对象包装在 parse/stringify 构造中，否则它将无法工作。

此外，一旦成功，我就可以通过 console.log 记录对象以查看发生了什么。结果是这样的：

这似乎只是按照我在 mappedIds 中需要的方式进行格式化。

有谁知道表面背后发生了什么（更重要的是，如何修复它）。

Answer 1

slug 数组中的值必须是字符串。有数字是触发错误的原因。

const mappedIds = userIds.map(id => ({ 
  params: { slug: [`${id.userId}`] }
}));

附带说明：如果 slug 只包含一个值，您可能不需要使用包罗万象的路由 [[...slug]].jsx - 可以使用 [slug].jsx 代替。< /p>