Puede usar la evaluación de cortocircuito para proporcionar un valor predeterminado si el content es un valor falso, generalmente undefined o null en este caso.

 const content = undefined const { item } = content || {} console.log(item) // undefined

Una forma menos idiomática ( ver este comentario ) es distribuir el contenido en un objeto antes de desestructurarlo, porque se ignoran los valores null e undefineds .

 const content = undefined const { item } = { ...content } console.log(item) // undefined

Si está desestructurando parámetros de función, puede proporcionar un valor predeterminado ( = {} en el ejemplo).

Nota: El valor predeterminado solo se aplicaría si el parámetro desestructurado no está undefined , lo que significa que la desestructuración de valores null generará un error.

 const getItem = ({ item } = {}) => item console.log(getItem({ item: "thing" })) // "thing" console.log(getItem()) // undefined try { getItem(null) } catch(e) { console.log(e.message) // Error - Cannot destructure property `item` of 'undefined' or 'null'. }

O incluso establezca un valor predeterminado para la propiedad del item si el objeto de entrada no contiene la propiedad

 const getItem = ({ item = "default" } = {}) => item console.log(getItem({ item: "thing" })) // "thing" console.log(getItem({ foo: "bar" })) // "default"

const { item } = Object(content)

La desestructuración del objeto anidado es limpia y corta, pero apesta cuando la propiedad de origen es null o no está undefined en el objeto del lado derecho

digamos que tenemos

 const { loading, data: { getPosts }, } = useQuery(FETCH_POSTS_QUERY);

Solución 1 si tenemos objetos de datos pero no getPosts , entonces podemos usar:
(Configuración predeterminada en cada nivel)

 const { loading, data: { getPosts = [] } = { getPosts: [] }, } = useQuery(FETCH_POSTS_QUERY);

Solución 2: si los data del evento no están undefined , entonces:

 const { loading, data: { getPosts } = { getPosts: [] }, } = useQuery(FETCH_POSTS_QUERY);