Dynamic route: “the ‘id’ argument must be of type string. Received null

[jenkshields]

Hiya! I’m running into an issue with generating dynamic pages. I’m pulling data from Sanity, and I think I’ve got the code right, but every time I try load the page I get a type error - “the ‘id’ argument must be of type string. Received null”. The file is named ‘/post/[slug].js’, so that’s the variable name I’ve used throughout - I’m not sure where id is coming from, or if it’s something extra I need to pass, or if I’m not passing my slug right! Any help greatly appreciated!

import client from '../../client’

const Post = ({ post }) => {
  ...
}

export default Post

export const getStaticPaths = async () => {
  const posts = 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 = client.fetch(`*[_type == "blog" && slug.current == $slug]{ title, date, link, excerpt, body, slug }[0]`, {slug: params.slug})
  
  return {
    props: { post }
  }
} 

Update: this seems to be a specific error with the iPadOS app play.js - either the app itself or the configuration it uses. Running this in a desktop environment doesn’t bring up this error.

[timneutkens]

What's the path of the page that you've created? Something like pages/blog/[id].js? If so you're currently returning params: { slug: post.slug.current }, in that case it should be id instead of slug if the page is named [id].js: params: { id: post.slug.current }

[jenkshields]

The path is /pages/post/[slug].js - I wondered about that!