TypeError: Cannot destructure property ‘…’ of ‘useLoaderData(…)’ as it is null.

React web applications (Next.js, Remix) use React hooks to transfer data between the server side and browser side code. Remix uses the loader() function to run code on the server to produce data for the web page, and the

const { posts } = useLoaderData<typeof loader>();

instruction in the browser code to receive it.

When the compiler throws the TypeScript error:

TypeError: Cannot destructure property ‘…’ of ‘useLoaderData(…)’ as it is null.

add || {} to the end of the line to provide a default value:

const { incidents } = useLoaderData<typeof loader>() || {} ;