绑定DOM元素点击监听传递ID时出现document.getElementById返回null的报错

1. 事件绑定的写法存在核心错误 #

你的绑定代码：

subCategoryArray[i].addEventListener("click", PassValue(this.id));

这是JS事件绑定的经典误区：addEventListener的第二个参数必须传入函数引用，不能传入函数执行后的返回值。
你这里写的PassValue(this.id)是立刻执行的代码：循环跑到绑定这一步的时候，PassValue就会直接运行，此时既没有用户点击事件触发，循环外层的this也根本不是正在遍历的sub-category元素，传进去的this.id自然是空值，这就是recived_value为null、getElementById报空的直接原因。
更关键的是：PassValue执行完没有返回值，最终绑定到click事件上的其实是undefined，就算不报错，点击元素也根本触发不了你的逻辑。

2. PassValue内部的DOM操作逻辑本身不成立 #

你写的取值代码：

let mainCategory = document.getElementById(recived_value).parentNode.firstChild(this.id);

• firstChild是DOM元素的只读属性，不是带参数的方法，不能用括号传参调用
• 按照你给出的HTML结构，wrapper容器的第一个子节点不是那个main-category的div，是标签换行、缩进生成的空白文本节点，就算逻辑正确也拿不到你要的目标元素
• 事件回调里的this默认就指向触发点击的DOM元素，根本不需要绕一圈通过getElementById反查

// 获取所有sub-category元素并转为可遍历的数组
const subCategoryEls = Array.from(document.querySelectorAll(".sub-category"));

// 循环绑定点击事件
subCategoryEls.forEach(el => {
  el.addEventListener("click", function() {
    // 此处this天然指向被点击的sub-category元素，直接取id即可
    const currentSubId = this.id;
    // 从当前元素向上拿父级wrapper，直接选择类名为main-category的元素，避开空白文本节点干扰
    const mainCategoryEl = this.parentElement.querySelector(".main-category");
    // 传入两个参数调用你需要的后续处理函数
    TwoArgFunc(mainCategoryEl, currentSubId);
  })
})

// 后续业务逻辑可按需求在这个函数里实现
function TwoArgFunc(mainEl, subId) {
  // 示例：点击子分类时把主分类的文本替换为当前子分类内容
  mainEl.textContent = subId;
}

• 绑定事件时不要在addEventListener参数里直接写带括号的函数调用，要把实际执行的逻辑放到独立的函数作用域里，等用户点击的时候再运行
• 取DOM节点时优先用querySelector搭配类名选择，不要直接用firstChild/lastChild，避免被HTML排版生成的空白文本节点干扰
• 事件回调的this上下文会自动绑定到触发事件的DOM元素，不需要手动传递id值，减少不必要的绕路操作

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