Fix JavaScript TypeError Cannot destructure property 'X' of undefined or null (2025 Guide)

Fix TypeError: Cannot destructure property 'X' of undefined or null in JavaScript - 2025 Guide

Posted on: April 7, 2025

Encountered a "TypeError: Cannot destructure property 'X' of undefined or null" in JavaScript? This error occurs when you attempt to destructure a property from an `undefined` or `null` object. Let’s fix it fast in this 2025 guide!

What Causes "TypeError: Cannot destructure property 'X' of undefined or null"?

This error happens when the target object for destructuring is `undefined` or `null`, which cannot be destructured. Common causes include:

• Undefined Object: The object hasn’t been initialized or returned.
• API Failure: Data from an API is `null` or `undefined`.
• Missing Default: No fallback provided for destructuring.

Check this demo (open console with F12):

Here, destructuring `name` from an `undefined` object triggers the error.

How to Fix It: 3 Solutions

Let’s resolve this error with practical steps:

(Diagram: Developer destructures, gets error, adds check, runs successfully.)

Solution 1: Check Object Before Destructuring

Verify the object exists before destructuring:

// Wrong
const obj = undefined;
const { name } = obj;

// Fixed
const obj2 = undefined;
const { name } = obj2 ?? {};
console.log(name); // undefined

Use nullish coalescing (`??`) to provide an empty object as a fallback.

Solution 2: Provide Default Values

Assign default values during destructuring:

// Wrong
const obj = null;
const { name } = obj;

// Fixed
const obj2 = null;
const { name = "Default" } = obj2 ?? {};
console.log(name); // "Default"

Default values ensure destructuring works even with `null` or `undefined`.

Solution 3: Validate with Conditional

Use a conditional check to handle invalid objects:

// Wrong
const obj = undefined;
const { name } = obj;

// Fixed
const obj2 = undefined;
const name = obj2 && obj2.name ? obj2.name : "Default";
console.log(name); // "Default"

Check the object and its property with a logical AND (`&&`) condition.

Quick Checklist

• Is the object `undefined` or `null`? (Use `??` with an empty object)
• Missing properties? (Add default values in destructuring)
• Dynamic data? (Use a conditional check)

Conclusion

The "TypeError: Cannot destructure property 'X' of undefined or null" can be avoided with proper checks and defaults. With these 2025 solutions, your code will stay robust. Got another JavaScript error? Let us know in the comments!