为何JavaScript Promise在Chrome/Edge等返回undefined，Firefox正常？

伙计，这个问题的核心是hideDetails(table)在Chrome、Edge等浏览器中返回了undefined，而非你预期的Promise实例——这就是调用.then()时报错的原因。咱们一步步拆解可能的诱因和解决方案：

可能的问题根源 #

1. countSelected(table)跨浏览器行为不一致
   你在Promise执行器里调用了countSelected，如果这个函数在非Firefox浏览器中抛出异常（比如table参数不是预期的原生DOM元素、或者函数内部用了Firefox独有的API），Firefox可能会静默处理这类错误，让代码继续执行；但其他浏览器会直接抛出异常。正常来说，Promise会自动捕获执行器内的异常并转为rejected状态，函数依然会返回Promise——但如果countSelected的异常发生在Promise构造之前（比如你实际代码里提前调用了它），就会打断函数执行流程，走不到return promise这一步，最终返回undefined。

2. DOM元素不存在导致执行器崩溃
   当document.getElementById找不到目标元素时会返回null，访问null.style在Chrome等浏览器里会直接抛出错误。虽然Promise会捕获这个异常，但极端情况下可能导致Promise构造失败（这种情况很少见），或者你的代码在某些浏览器里因为元素不存在直接中断了函数流程。

3. 函数定义的隐性兼容性问题
   比如你把hideDetails定义在了一个仅Firefox满足的条件块里，导致其他浏览器里函数根本没被定义——不过这种情况会报“hideDetails is not a function”，和你遇到的错误不太一样，但也值得排查。

修复方案 #

咱们针对性解决这些问题：

1. 确保函数始终返回Promise，兜底所有异常

修改hideDetails，直接返回Promise（避免额外变量声明的潜在问题），同时用try-catch捕获执行器内的所有错误，把异常转为Promise的rejected状态：

function hideDetails(table) { 
  return new Promise((resolve, reject) => {
    try {
      // 缓存countSelected结果，避免重复调用
      const selectedStatus = countSelected(table);
      
      if (selectedStatus === "multiple" || selectedStatus === "none") { 
        // 先检查元素存在再操作，避免访问null.style报错
        ['details', 'configDetailsWrap', 'list', 'list_2'].forEach(id => {
          const el = document.getElementById(id);
          if (el) el.style.display = 'none';
        });
      } else { 
        const detailsEl = document.getElementById('details');
        if (detailsEl) detailsEl.style.display = 'block';
      }
      
      resolve();
    } catch (err) {
      console.error('hideDetails执行出错：', err);
      reject(err); // 把异常交给调用方处理
    }
  });
}

2. 排查countSelected的跨浏览器兼容性

• 确认table参数是原生DOM元素，如果是jQuery对象，要换成table[0]获取原生元素
• 检查countSelected内部是否使用了浏览器专属API，比如Firefox独有的表单属性，换成标准API替代

3. 优化调用逻辑，用catch统一捕获错误

把调用代码里的错误处理换成catch，这样不管是Promise rejected还是其他错误，都能被捕获：

hideDetails(table)
  .then(function() { 
    const item = $('#details'); 
    const position = item.position(); 
    window.scrollTo(0, position.top); 
  })
  .catch(function(err) { 
    console.log('显示详情时出错：', err); 
  });

这样调整后，函数在所有浏览器里都会返回Promise，即使出错也能被正确捕获，不会再出现Cannot read property 'then' of undefined的问题。

内容的提问来源于stack exchange，提问作者Toni Latenz