Question

Next.js 中出现“getStaticPaths 中未提供必需参数 (id) 作为字符串”错误

2020-03-23

44583

javascript reactjs next.js

我对 getStaticPaths 函数有疑问。当我尝试获取带有参数的动态显示时，它显示错误： getStaticPaths 中未提供 /movies/[id] 所需的参数 (id) 作为字符串 ，但如果我使用上述其他方法，它就可以正常工作。最重要的是，我是文档。

import fetch from 'node-fetch';


function MovieSelect({movie}){

    return(
        <div>
            <h1>Test: {movie.name}</h1>
            <p>{movie.summary.replace(/<[/]?[pb]>/g, '')}</p>
            {movie.image ? <img src={movie.image.medium} /> : null}
        </div>
    )
}

export async function getStaticPaths(){
    const request  = await fetch('https://api.tvmaze.com/search/shows?q=batman')
    const movies = await request.json()

    //const paths = movies.map(movie =>`/movies/${movie.show.id}`)

    const paths = movies.map(movie =>({
        params: {id: movie.show.id},
    }))

    return {
        paths,
        fallback: false
    }
}

export async function getStaticProps({params}){
    const request = await fetch(`https://api.tvmaze.com/shows/${params.id}`)
    const movie = await request.json()

    return{
        props:{
            movie
        }
    }
}

export default MovieSelect

Answer 1

在 getStaticPaths 中，/movies/[id] 的必需参数 (id) 未以 字符串 的形式提供

错误提示中，id 应为字符串。从浏览器访问 api 后，您会发现 id 不是字符串，而是数字。您需要将其转换为字符串。

params: {id: movie.show.id.toString()},

Answer 2

我的问题产生了相同的错误，但我遇到了不同的错误。

TL;DR：我的文件的名称需要与 params 对象中使用的 slug 的键匹配。

就我而言，我的文件名是 [postSlug].js 。因此，键应该是 getStaticPaths() 内的 postSlug 。

// In [postSlug].js

const pathsWithParams = slugs.map((slugs) => ({ params: { postSlug: slug } })); // <-- postSlug is right
const pathsWithParams = slugs.map((slugs) => ({ params: { id: slug } })); // <--- id is wrong

我的整个函数看起来像这样

export async function getStaticPaths() {
    const slugs = await getAllBlogSlugs();
    const pathsWithParams = slugs.map((slug) => ({ params: { postSlug: slug } }));

    return {
        paths: pathsWithParams,
        fallback: "blocking",
    };
}

参考：

NextJS.org 获取静态路径

Answer 3

export async function getServerSideProps({ query, locale }) {
const { id } = query;
if (!id) return { notFound: true };
return {
   props: {
     fallback: true,
     query,
     locale,
     ...(await serverSideTranslations(
     locale,
     ["common", "header", "footer"],
     nextI18nextConfig
    )),
   },
 };
}