How to Fix "Cannot Read Properties of Undefined" in JSON Responses

"Cannot read properties of undefined (reading 'x')" happens when your code tries to access a property on something that turned out to be undefined — most commonly, when you're reaching into a nested field of a JSON API response, like user.profile.avatar, and one of those intermediate objects (profile, in this example) simply wasn't present in the actual response.

This is one of the most common runtime errors in any application that consumes an external API, and it happens for a genuinely wide range of reasons: the API's response shape changed after your code was written, a field is conditionally present depending on some state you didn't account for, an error response has a completely different shape than a success response, or the specific record you're looking at legitimately has no value for that field (a user who hasn't set a profile picture, for instance).

The instinct to fix this by adding a null check right where the error occurred is understandable but usually treats the symptom rather than the cause. A more durable fix starts with actually looking at the raw API response — log it, or better, paste it into our JSON Formatter — and confirming exactly which field is missing and under what conditions, rather than guessing.

Once you know which field is unreliable, JavaScript's optional chaining operator (?.) is the right tool for genuinely optional data — user?.profile?.avatar returns undefined safely at any point in the chain where something is missing, instead of throwing. This should be your default for any field that the API's own documentation marks as optional, or that you've directly observed being absent in real responses.

For fields that should always be present according to the API's contract, but occasionally aren't due to a bug on the API's end or a version mismatch, optional chaining alone just hides the problem — the safer pattern is to validate the response shape at the boundary where you receive it (right after the fetch call), and fail loudly with a clear error message if a required field is missing, rather than letting a mysteriously undefined value silently propagate deep into your application logic before it finally causes a crash somewhere unrelated.

TypeScript helps significantly here if you're not already using it, since it forces you to explicitly declare which fields on an API response type are optional versus required, and then flags every place in your code that doesn't handle the optional case — turning this class of runtime error into a compile-time warning instead.

As a final layer, providing sensible fallback values with the nullish coalescing operator (user?.profile?.avatar ?? '/default-avatar.png') for genuinely optional display data means a missing field degrades gracefully into a reasonable default, rather than causing either a crash or a broken-looking UI with the literal text 'undefined' showing up somewhere on the page.