TypeError: Cannot read properties of undefined despite properties returned

Question

I've been getting this error "TypeError: Cannot read properties of undefined (reading 'current')", even though I've tried ways to verify that the properties are properly returned. I've also tried the proposed solution [here](https://github.com/vercel/next.js/issues/42840) but it didn't workHere's the error message on Vercel upon deployment:// Error message on Vercel

...
21:48:39.441 | - info Collecting page data...
21:48:40.198 | TypeError: Cannot read properties of undefined (reading 'current')
21:48:40.198 | at /vercel/path0/.next/server/chunks/661.js:48:41
21:48:40.198 | at Array.map (<anonymous>)
21:48:40.198 | at Object.generateStaticParams (/vercel/path0/.next/server/chunks/661.js:47:23)
21:48:40.198 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
21:48:40.199 | at async buildParams (/vercel/path0/node_modules/next/dist/build/utils.js:913:36)
21:48:40.199 | at async /vercel/path0/node_modules/next/dist/build/utils.js:930:33
21:48:40.199 | at async /vercel/path0/node_modules/next/dist/build/utils.js:1066:117
21:48:40.199 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:103:20)
21:48:40.200 | Â 
21:48:40.200 | > Build error occurred
21:48:40.202 | Error: Failed to collect page data for /[categorySlug]/[postSlug]
21:48:40.202 | at /vercel/path0/node_modules/next/dist/build/utils.js:1155:15
21:48:40.202 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
21:48:40.203 | type: 'Error'
21:48:40.203 | }
21:48:40.275 | Error: Command "npm run build" exited with 1Continued below...

Ant · Answer

Here's where I suspect things went wrong:

// app/[categorySlug/[postSlug]/layout.tsx

...

type Props = {
  params: {
    postSlug: string;
    categorySlug: string;
  };
};

...

export async function generateStaticParams({
  params: { categorySlug },
}: Props) {
  const categoryPostsData: Promise<Post[]> = getCategoryPosts(categorySlug);

  const categoryPosts = await categoryPostsData;

  return categoryPosts.map(post => ({
    postSlug: post.slug.current,
  }));
}

...

I've tried to create a separate component to see if the properties are truly undefined. Here's the code I tried:

// app/[categorySlug/[postSlug]/page/CategoryPostTest.tsx

import { Post } from "@/types/Post";
import { getCategoryPosts } from "@/sanity/sanity-utils";

type Props = {
  categorySlug: string;
};

export default async function CategoryPostTest({ categorySlug }: Props) {
  const categoryPostsData: Promise<Post[]> = getCategoryPosts(categorySlug);

  const categoryPosts = await categoryPostsData;

  function getPostSlugs() {
    return categoryPosts.map(post => ({
      postSlug: post.slug.current,
    }));
  }

  const postSlugs = getPostSlugs();
  console.log(postSlugs);
}

What I see in the console.log:

// console

[
  {
    postSlug: 'blog-post-a'
  },
  { 
    postSlug: 'blog-post-b' 
  },
  {
    postSlug: 'blog-post-c'
  }
]

I'm so close to completing my site but I can't seem to deploy it, please help!

TypeError: Cannot read properties of undefined despite properties returned

1 Reply