How to tackle the "Cannot read properties of null" error during build time in a Next.js project

Hello fellow devs, upon doing either npm run build or yarn build i have come across this error, Cannot read properties of null (reading 'mainImage'). How can I tackle this issue? I would appreciate any form of help. Thank you. Ill be attaching the screenshots. First one is page.tsx at '*[project]/app/(user)/post/[slug]/page.tsx*', the error originated from line 53. Second one is post.tsx at '*[project]/schemas/post.ts*', where the type of the field is defined. Third image provides an high level view of the project along with the caught error message in the terminal.

There is data in mainImage. just checked by querying

From what I understand, you are exporting async function as component ? You should instead export a component and use async hook :

Cannot read properties of null (reading 'mainImage')

Indicates that you are trying accessing

null.mainImage

not that

mainImage

is null

Hey thanks for replying. Ive been trying to implement your suggested solution but i think i a going wrong somewhere syntactically. I am relatively new to typescript, nextjs and sanity.

i am facing this issue during build time ie when i do npm run build or yarn build otherwise this application is working fine on my locacl server

is there any other approach that i could try

actually your solution worked just had to add this line if (!post){ return null;
}