如何在JavaScript对象解构中应用可选链处理undefined值？

你之前尝试的const {state?: {one, two, three, four}} = useLocation()写法不成立，因为可选链?.不能直接用在解构的键名位置。下面给你两种可行的解决方案：

方案一：给state设置默认空对象 #

直接在嵌套解构时给state指定默认的空对象，这样即使state是undefined，解构嵌套属性也不会抛出错误：

const { state: { one, two, three, four } = {} } = useLocation();

如果需要给one、two等属性也设置默认值（避免它们为undefined），可以进一步补充：

const { state: { one = '', two = '', three = '', four = '' } = {} } = useLocation();

方案二：先解构state再单独处理 #

如果希望one、two等在state为undefined时保持undefined，可以先解构出state，再用空值合并操作符??配合解构：

const { state } = useLocation();
const { one, two, three, four } = state ?? {};

这里state ?? {}的作用是：当state为null或undefined时，用空对象替代，确保后续解构不会报错。

简单来说，解构语法本身不支持直接在键上使用可选链，但可以通过默认值赋值或拆分解构步骤来实现你想要的效果，不用依赖useEffect逐一赋值。

内容的提问来源于stack exchange，提问作者jaehyuk kim