如何在JS中安全解构可能为undefined/null的useSession返回对象？

针对你提到的useSession()返回undefined或null时解构报错的问题，可以通过逐层兜底空对象或结合可选链的方式避免错误，以下是几种实用写法：

1. 逐层设置默认空对象 #

在解构的每一层都指定默认值为{}，同时给最外层返回值兜底空对象，确保任意层级不存在时都不会触发报错：

const { data: { user: { id, role } = {} } = {} } = useSession() || {};

这里useSession() || {}处理最外层返回null/undefined的情况，内层的data和user也分别设置默认空对象，保证解构过程不会中断。

2. 先存返回值，再用可选链解构 #

如果觉得多层嵌套默认值写法繁琐，可以先接收useSession()的返回值，再通过可选链安全访问属性后解构：

const session = useSession();
const { id, role } = session?.data?.user || {};

这种写法更直观，session?.data?.user会在任意层级不存在时返回undefined，再通过|| {}兜底空对象，解构出的id和role会在无对应值时变为undefined，不会报错。

3. 封装函数统一处理（带默认值场景） #

如果需要给解构变量设置默认值（比如id默认空串、role默认'guest'），可以封装函数统一管理：

const extractSessionUser = (session) => {
  const { id = '', role = 'guest' } = session?.data?.user || {};
  return { id, role };
};

const { id, role } = extractSessionUser(useSession());

这种方式便于复用逻辑，也能集中维护默认值规则。

注意事项 #

• 不要省略内层默认值，比如直接写const { data: { user } } = useSession()，当data不存在时会直接抛出Cannot destructure property 'user' of 'undefined' or 'null'的错误。
• 若使用TypeScript，可配合类型定义明确返回值类型，让可选链的类型推断更准确。

内容的提问来源于stack exchange，提问作者Mikhail-Khoroshev