Solución: Cannot destructure property de undefined o null

¿Por qué ocurre?

La desestructuración asume que el valor existe. Si el objeto o array todavía es undefined (datos de API cargando, prop no pasada, resultado de función asíncrona) o null, JavaScript no puede acceder a sus propiedades y lanza el TypeError.

Solución paso a paso

Caso 1 — Datos de API que aún no han llegado (React):

// ❌ usuario es undefined mientras carga
function Perfil({ usuario }) {
  const { nombre, email } = usuario; // TypeError al primer render
  return {nombre};
}
// ✅ Opción A: valor por defecto en los parámetros
function Perfil({ usuario = {} }) {
  const { nombre = '', email = '' } = usuario;
  return 
{nombre};
}
// ✅ Opción B: renderizado condicional
function Perfil({ usuario }) {
  if (!usuario) return 
Cargando...;
  const { nombre, email } = usuario;
  return {nombre};
}
// ✅ Opción C: optional chaining
function Perfil({ usuario }) {
  return 
{usuario?.nombre};
}

Caso 2 — Desestructurar el resultado de fetch antes de que resuelva:

// ❌ getData() es asíncrona, devuelve una Promise, no el objeto
const { nombre } = getData();  // TypeError
// ✅ Await o .then()
const { nombre } = await getData();// ✅ Con .then()
getData().then(({ nombre }) => {
  console.log(nombre);
});

Caso 3 — Array vacío o undefined:

// ❌ El array puede estar vacío o ser undefined
const [primero, segundo] = obtenerItems(); // TypeError si devuelve undefined
// ✅ Valor por defecto para el array completo
const [primero, segundo] = obtenerItems() ?? [];// ✅ Valores por defecto para cada elemento
const [primero = null, segundo = null] = obtenerItems() || [];

Caso 4 — Props no pasadas en React:

// ❌ Si el padre no pasa la prop "config"
function Componente({ config }) {
  const { tema, idioma } = config; // TypeError
}// ✅ Desestructura con default en la firma
function Componente({ config = { tema: 'claro', idioma: 'es' } }) {
  const { tema, idioma } = config;
}

Herramienta de debug rápida:

// Antes de desestructurar, comprueba el tipo
console.log(typeof miVariable, miVariable);

Cómo evitarlo en el futuro

Usa optional chaining (`?.`) y nullish coalescing (`??`) de ES2020 para manejar valores potencialmente nulos. En React, inicializa siempre el estado con la forma correcta de los datos (objeto vacío, array vacío) en lugar de null/undefined.