I’m encountering a problem while creating dynamic pages in Next.js. I'm fetching data from Sanity and I believe my code is correct, but every time I attempt to load the page, I receive a type error - “the ‘id’ argument must be of type string. Received null”. The file path specified is ‘/post/[slug].js’, so I have consistently used the variable name 'slug' throughout my code. I'm unsure where this 'id' is coming from or if there's an additional parameter I need to pass, or if I am not passing the slug correctly!
I sought help in the Sanity forums, and it doesn't seem to be an issue with the API - I can successfully retrieve data in other parts of the application without any problems. In the console, it appears that the page compiles without errors, but this specific error occurs when trying to load it. I even tried having an empty div in the page component to eliminate any issues related to the presentation logic, but unfortunately, that did not resolve the problem.
The complete error message has been shared in a gist, and it seems to indicate a potential problem with jest or next-server. Despite several attempts, I am unable to identify the root cause of this issue!
import client from '../../client’
const Post = ({ post }) => {
...
}
export default Post
export const getStaticPaths = async () => {
const posts = await client.fetch(`*[_type == "blog"]{ slug }`)
const paths = posts.map(post => ({
params: {
slug: post.slug.current
}
}))
return {
paths,
fallback: false }
}
export const getStaticProps = async ({ params }) => {
const post = await client.fetch(`*[_type == "blog" && slug.current == $slug]{ title, date, link, excerpt, body, slug }[0]`, {slug: params.slug})
return {
props: { post }
}
}
UPDATE: It appears that this issue may be related to play.js or its configuration settings - conducting the same operation on a desktop environment does not produce the same error.