如何避免此处出现的Uncaught TypeError错误？

你的代码如下：

const userDetails = (id) => {
  console.log(id);

  const row = connection
    .prepare("SELECT * FROM users WHERE userId = ?")
    .get(3435);
  console.log(row.userName, row.userEmail, row.userPassword);
}

当输入错误ID时，查询不到用户数据，row会变成undefined，直接访问row.userName这类属性就会抛出：

Uncaught TypeError: Cannot read properties of undefined (reading 'userName')

可以用这几种方法解决：

• 先判断row是否存在再访问属性
  这是最直观的方式，先确认查询结果存在，再读取属性，还可以增加提示信息：

  const userDetails = (id) => {
    console.log(id);
  
    // 注意：原代码里get方法传了固定值3435，这里应该改成传入的id参数才合理
    const row = connection
      .prepare("SELECT * FROM users WHERE userId = ?")
      .get(id);
    if (row) {
      console.log(row.userName, row.userEmail, row.userPassword);
    } else {
      console.log('未找到对应用户');
    }
  }
  

• 使用可选链操作符简化判断
  可选链?.会在左侧值为undefined或null时直接返回undefined，不会抛出错误：

  const userDetails = (id) => {
    console.log(id);
  
    const row = connection
      .prepare("SELECT * FROM users WHERE userId = ?")
      .get(id);
    // 若row不存在，对应的属性会返回undefined
    console.log(row?.userName, row?.userEmail, row?.userPassword);
    // 也可以配合空值合并操作符给默认值
    console.log(row?.userName ?? '无用户名', row?.userEmail ?? '无邮箱', row?.userPassword ?? '无密码');
  }
  

• 解构赋值时设置默认值
  通过解构赋值配合默认值，即使row不存在，也能拿到预设的默认内容：

  const userDetails = (id) => {
    console.log(id);
  
    const row = connection
      .prepare("SELECT * FROM users WHERE userId = ?")
      .get(id);
    // 若row为undefined，用空对象兜底，同时给每个属性设置默认值
    const { userName = '无用户名', userEmail = '无邮箱', userPassword = '无密码' } = row || {};
    console.log(userName, userEmail, userPassword);
  }
  

内容的提问来源于stack exchange，提问作者programming Digital