链式访问对象属性时遇空值/未定义的默认值处理问题

你遇到的这个TypeError: Cannot read property 'file' of null是典型的深层属性访问空值问题——当edge.node.slika为null或者undefined时，再访问它的file属性就会直接抛出错误。完全不需要用try/catch来处理，有更简洁优雅的方案：

1. 首选：ES2020可选链操作符（?.） #

这是目前解决这类问题最简洁的方式，现代浏览器、Node.js 14+以及大多数构建工具（比如Webpack、Vite）都支持这个特性。它的核心作用是：如果链式调用中的某个环节是null或undefined，整个表达式会直接返回undefined，而不是抛出错误。

修改你的parseNovice函数如下：

const parseNovice = data => {
  return data.allContentfulNovica.edges.map(edge => {
    return {
      createdAt: edge.node.createdAt,
      id: edge.node.id,
      slika: edge.node.slika?.file?.url, // 任意环节缺失则自动返回undefined
      tekst: edge.node.tekst?.tekst,      // 同理处理tekst字段
      naslov: edge.node.naslov
    };
  });
};

不管slika是null，还是slika.file是null/undefined，slika字段都会自动设为undefined，完全匹配你的需求。

2. 兼容旧环境：手动逐层空值检查 #

如果你的项目需要兼容不支持可选链的旧环境，可以手动逐层检查每个属性是否存在：

const parseNovice = data => {
  return data.allContentfulNovica.edges.map(edge => {
    const node = edge.node;
    return {
      createdAt: node.createdAt,
      id: node.id,
      slika: node.slika && node.slika.file ? node.slika.file.url : undefined,
      tekst: node.tekst ? node.tekst.tekst : undefined,
      naslov: node.naslov
    };
  });
};

这里用逻辑与（&&）确保前面的属性存在后，才访问下一层，从根源避免报错。

3. 复用性方案：封装通用深层取值工具函数 #

如果你的项目中有很多类似的深层属性访问需求，可以封装一个通用函数来统一处理：

// 通用函数：根据路径获取对象深层属性，不存在则返回undefined
const getNestedValue = (obj, path) => {
  return path.split('.').reduce((currentValue, key) => {
    // 如果当前值是null/undefined，直接返回undefined
    if (currentValue == null) return undefined;
    return currentValue[key];
  }, obj);
};

// 改造后的parseNovice
const parseNovice = data => {
  return data.allContentfulNovica.edges.map(edge => {
    const node = edge.node;
    return {
      createdAt: node.createdAt,
      id: node.id,
      slika: getNestedValue(node, 'slika.file.url'),
      tekst: getNestedValue(node, 'tekst.tekst'),
      naslov: node.naslov
    };
  });
};

这个函数可以在整个项目中复用，处理任意深层属性的安全访问。

为什么不推荐用try/catch？ #

try/catch虽然能捕获错误，但会让代码结构变得臃肿，尤其是在循环中使用时，可读性会大幅下降。而且从性能角度来说，try/catch在捕获错误时会有额外的性能开销，不如前面的方法高效直接。只有在极少数无法提前预判的异常场景下，才适合用try/catch。

内容的提问来源于stack exchange，提问作者Miha Šušteršič