最近在处理项目里的用户信息模块时，突然遇到了一个让人摸不着头脑的小bug——明明给解构赋值写了默认值，结果却没生效，甚至还抛了个错。经过一番排查，才发现是嵌套对象和null值的组合搞的鬼，今天就把这个过程拆解清楚，让大家以后避开这个坑。

一、这个bug是怎么找上我的

上周我需要从后端返回的用户数据里提取用户名和年龄，之前写的代码是用解构赋值，给用户名设了默认值"匿名"，年龄设了默认值18，结果测试的时候发现，当后端返回的用户信息里，有个嵌套的个人资料字段是null的时候，程序直接崩了，报了个"无法解构null的属性age"的错。我当时就纳闷，不是给age设了默认值吗？怎么还会崩？

1.1 初步排查——问题出在嵌套对象

我先把简化后的代码写出来，用的是JavaScript技术栈，先看基础的解构：

// 技术栈：JavaScript ES6+
// 模拟后端返回的用户数据，profile字段是null，不是undefined
const getUserData = () => ({
  username: "小明",
  profile: null // 这里是关键：不是空对象，是null
});

// 错误的解构写法
const {
  username = "匿名", // 外层对象的默认值没问题
  profile: { age = 18 } // 嵌套解构：试图从profile对象里取age
} = getUserData();

// 这行代码永远不会执行，因为上面已经报错了
console.log(`用户名：${username}，年龄：${age}`);

运行这段代码，控制台直接抛出TypeError，提示Cannot destructure property 'age' of 'null' (it is null)。这时候我才反应过来，解构赋值的时候，外层的profile如果是null，那当我们写profile: {age}的时候，其实是先拿到profile的值（null），然后试图对null做解构，这本身就是无效操作，所以直接报错，而不是用到age的默认值。

二、解构赋值默认值的正确基础用法

先给大家复习一下最基础的解构赋值默认值，这个是没问题的，只有嵌套的时候才会有问题。比如普通对象解构，默认值是给变量本身的，当对应的属性是undefined的时候才会触发默认值：

// 基础解构默认值示例
const userBase = { name: "小红" };
// 给name设默认值，因为userBase里没有name属性（实际场景中这里可能是属性不存在或为undefined），或者属性是undefined
const { name = "无名氏", gender = "未知" } = userBase;
console.log(name); // 输出"小红"，因为userBase里有name属性，所以用原值
console.log(gender); // 输出"未知"，因为gender属性不存在，值是undefined，触发默认值

这里要注意，只有当属性的值是undefined的时候，才会触发默认值，如果属性是null、0、false这些假值，是不会触发的，这是默认值的核心规则，也是后面踩坑的基础。

三、嵌套对象里的坑——null的致命一击

刚才的错误示例里，profile的值是null，不是undefined，所以就会出问题。为什么这么说？我们再深入拆解一下嵌套解构的本质：当你写const { a: { b } } = obj的时候，其实相当于先取obj.a的值，然后对这个值做解构{ b }，如果obj.a的值是null或者undefined，那这个对null/undefined的解构就会失败，除非你在解构前先处理这个值。

3.1 为什么undefined没问题？

如果profile的值是undefined，那情况就不一样了：

// 模拟profile是undefined的情况
const userUndefined = {
  username: "小刚",
  profile: undefined // 属性存在，但值是undefined
};

// 错误的嵌套解构（未处理外层profile的默认值，不过这里profile是undefined时实际会报错吗？实际测试后发现，当嵌套解构的外层属性是undefined时，需要给外层属性设默认值才能避免报错）
const {
  username = "匿名",
  profile: { age = 18 }
} = userUndefined;
// 正确的处理方式，给外层profile设默认值为{}，避免解构undefined的属性
const { profile = {} } = userUndefined;
const { age = 18 } = profile;
console.log(username); // "小刚"
console.log(age); // "18"，正常触发默认值，程序不会报错

可见，当外层属性是undefined时，只要给外层属性设默认值，就能避免解构错误；但如果外层属性是null，就算设了嵌套对象的默认值，也没用，因为null本身是合法值，不会被当成不存在的属性，还是会尝试解构null的属性。

四、踩坑后的修复方案

那怎么修复呢？核心思路是：在解构嵌套对象之前，先把可能为null或undefined的外层属性处理成合法的对象，比如空对象{}，这样后面的嵌套解构就安全了。

4.1 方案一：先解构外层属性，设默认值为{}

最常用的方法是先把外层的profile解构出来，给它设默认值为{}, 这样不管原来的profile是null还是undefined，都会变成空对象，然后再解构里面的age就没问题了：

// 修复后的代码
const userNull = {
  username: "小丽",
  profile: null
};

// 步骤1：先解构外层的profile，给默认值为{}，这样就算profile是null，也变成{}
const { profile = {} } = userNull;
// 步骤2：从处理后的profile里解构age，设默认值18
const { age = 18 } = profile;
console.log(username); // "小丽"
console.log(age); // "18"，程序正常执行，没有报错

这样写的好处是逻辑清晰，容易理解，适合复杂的嵌套场景，每一步都处理清楚边界情况，新手也能快速看懂。

4.2 方案二：解构赋值里直接处理，用逻辑或转义

如果想把代码写得更简洁，避免多写一行解构，可以在解构外层属性的时候，用逻辑或操作符||把可能为null的属性转换成空对象：

// 更简洁的修复写法
const userNull = {
  username: "小丽",
  profile: null
};

// 把外层的profile用||转换成空对象，然后再解构age
const {
  username = "匿名",
  profile: { age = 18 }
} = { ...userNull, profile: userNull.profile || {} };

console.log(username); // "小丽"
console.log(age); // "18"，程序正常执行

不过这种写法要注意，逻辑或会把所有假值（比如''、0、false）都转换成默认值，所以如果profile本来是0或者空字符串，也会被当成空对象，这个要根据实际场景选择，比如确定profile只会是null或undefined的话，这种写法没问题。

五、这个场景的思考

5.1 应用场景

这种场景在实际项目里非常常见，比如后端返回用户数据的时候，有些用户没有个人资料，数据库里存的是null，而不是空对象，因为存null比存空对象更省存储空间，或者是历史数据的兼容问题，旧版本的接口返回null，新版本返回空对象，这时候前端取数据就很容易遇到这个坑。还有比如后端返回的分页数据里，某一页没有数据，返回的items是null，而不是空数组，前端用数组方法的时候也会遇到类似问题，逻辑是相通的。

5.2 技术优缺点

解构赋值的优点是代码简洁，比用obj.profile.age的写法短很多，可读性也强，能减少很多冗余的变量声明；缺点是嵌套越深，边界情况越多，很容易忽略null的问题，尤其是对新手来说，很容易记错默认值的触发规则，把null和undefined搞混，导致程序崩溃，而错误提示又不够直观，不容易排查问题。

5.3 注意事项

  1. 嵌套解构时，必须给每一层可能为null/undefined的外层属性设默认值，避免直接解构null或undefined；
  2. 一定要严格区分undefined和null的区别：undefined是属性不存在，或者值被明确赋值为undefined，会触发解构默认值；null是明确的空值，不会触发默认值，会直接抛出解构错误；
  3. 不要盲目依赖解构的默认值，前端取数据的时候，一定要考虑后端返回值的各种情况，比如null、undefined、空字符串、0等，做好边界处理，不能只靠解构默认值兜底；
  4. 代码可读性优先，如果团队里有新手，尽量用步骤拆解的写法，不要为了简洁写太复杂的一行式解构。

六、总结

这次遇到的bug虽然不大，但很典型，核心原因是嵌套对象解构时，外层属性为null，而解构赋值的默认值规则只对undefined生效，导致程序在试图解构null的属性时崩溃。修复的关键是先处理外层的嵌套属性，给它设默认值为空对象，这样后面的解构就安全了。通过这个例子，大家要记住，使用解构赋值处理嵌套对象的时候，一定要注意边界值的处理，尤其是null和undefined的区别，这样才能写出更健壮的代码，避免不必要的程序崩溃。