JavaScript函数条件不满足仍执行及TypeError问题排查求助

错误原因分析 #

1. typeof判断无法区分null与对象
   JavaScript中typeof null的结果是"object"，所以外层条件typeof loggerInfo === "object"会在loggerInfo为null时通过，此时尝试访问loggerInfo.section就会触发Cannot read properties of null (reading 'section')的错误。

2. 内层条件逻辑不严谨
   即使loggerInfo是有效对象，typeof loggerInfo.section的判断也存在问题：如果loggerInfo.section是null，typeof结果为"object"，会被当成真值进入代码块；只有当section是undefined时才会被排除。这种逻辑不符合"仅指定条件满足时执行"的预期，导致不该执行的代码被触发。

解决方法 #

1. 修正条件判断逻辑 #

• 先排除loggerInfo为null的情况，再判断是否为对象；
• 直接检查loggerInfo.section是否存在且有效（同时排除null和undefined）。

2. 添加异步错误捕获 #

异步函数中未处理的错误会变成未捕获的Promise错误，用try/catch包裹逻辑，便于调试和处理异常。

3. 严谨校验接口返回数据 #

对fetch响应和返回的JSON数据做多层校验，避免因后端返回结构不符合预期导致的错误。

修改后的代码示例 #

const getOfferingCourses = async () => {
  try {
    // 严格判断loggerInfo是有效对象且section存在
    if (loggerInfo !== null && typeof loggerInfo === "object" && loggerInfo.section != null) {
      const formdata = new FormData();
      formdata.append("getOfferingCourse", loggerInfo.section);
      
      const dep = await fetch(baseUrl + "enroll.php", {
        method: "POST",
        headers: {
          Accept: "application/json",
        },
        body: formdata,
      });

      // 先检查HTTP请求是否成功
      if (!dep.ok) {
        throw new Error(`请求失败，状态码：${dep.status}`);
      }

      const depa = await dep.json();
      
      // 多层校验返回数据结构
      if (depa?.status === "success" && depa?.data) {
        setOffeing(depa.data.offering);
        setOffCourses(depa.data.courses);
      }
    }
  } catch (error) {
    console.error("获取课程数据出错：", error);
    // 可根据需求添加前端错误提示
  }
}

内容的提问来源于stack exchange，提问作者NATNAEL BELIHU