O que é o erro TypeError: Cannot destructure property 'X' of undefined e como resolvê-lo?

O erro TypeError: Cannot destructure property 'X' of undefined acontece quando você tenta desestruturar uma propriedade de um objeto que não foi definido ou que é undefined.

Exemplo de erro:

const obj = undefined;
const { name } = obj; // TypeError: Cannot destructure property 'name' of undefined

Neste caso, o objeto obj é undefined, o que faz com que a desestruturação falhe e o erro seja lançado.

Exemplo corrigido:

const obj = { name: 'John' };
const { name } = obj; // John

Aqui, o objeto obj é inicializado corretamente, e a desestruturação funciona sem problemas.

Como corrigir?

Sempre verifique se o objeto que você está tentando desestruturar não é undefined ou null. Uma boa prática é garantir que os dados estejam definidos antes de tentar acessá-los. Você pode usar o encadeamento opcional (?.) para evitar esse tipo de erro:

const obj = undefined;
const { name } = obj ?? {}; // Corrigido

Esse exemplo usa o operador de coalescência nula (??) para garantir que, se obj for undefined, um objeto vazio será usado em vez de lançar um erro.

Como evitar o erro TypeError: Cannot destructure property 'X' of undefined em JavaScript

Em JavaScript, a desestruturação é uma técnica muito útil, mas ela requer cuidado para garantir que o objeto a ser desestruturado está corretamente inicializado. Ao lidar com dados de APIs ou valores dinâmicos, sempre valide se os dados estão presentes antes de desestruturá-los.

Algumas aplicações:

• Valide objetos antes de usá-los em desestruturações.
• Utilize o encadeamento opcional (?.) para evitar erros ao acessar propriedades de objetos que podem ser undefined.
• Quando manipular dados externos, sempre faça verificações para garantir que os dados estão completos e definidos antes de usá-los.

Dicas para quem está começando

• Antes de tentar desestruturar qualquer objeto, verifique se ele existe.
• Use o encadeamento opcional para evitar o erro ao acessar dados de objetos que podem ser undefined ou null.
• Se estiver lidando com dados de uma API, sempre valide a resposta antes de usar desestruturação.

Contribuições de

João Gutierrez

Desenvolvedor e arquiteto de software com ampla atuação em PHP, Node.js e Python.

Mais sobre o autor

Compartilhe este tutorial