Cannot read properties of null (reading 'firstChild')错误排查与修复求助

问题原因 #

1. 模块执行时机导致DOM查询失败
   list.js在模块加载阶段就执行了document.querySelector('div.sidebar div')，但此时renderLayout()还没被调用（renderLayout在index.js导入后才执行），页面DOM中根本不存在这个元素，所以返回null。

2. 变量混淆
   layout.js里自己创建了titleDisplays元素，但没有导出这个变量；list.js里又单独去DOM中查询同名元素，两者完全不是同一个对象，自然查不到。

修复方案 #

方案一：直接复用layout.js中创建的元素（推荐）

这种方式避免DOM查询，直接使用已经创建好的元素引用：

1. 修改layout.js，导出创建好的titleDisplays，同时确保父元素div2带有sidebar类（对应原查询器的选择器）：

// some code

const div2 = document.createElement('div');
div2.classList.add('sidebar'); // 给父元素添加sidebar类
const titleDisplays = document.createElement('div');
div2.appendChild(titleDisplays);

// some more code

function renderLayout() {
    document.body.appendChild(div2);
}

export {renderLayout, titleDisplays}; // 导出titleDisplays

2. 修改list.js，导入layout.js中的titleDisplays，删除原有的DOM查询代码：

import { titleDisplays } from './layout.js';
export let lists = []
export let listItems = []

export function newList(list) {
    localStorage.setItem(list, [])
    localStorage.setItem(Math.round((localStorage.length + 1) / 2), list);
}

export function emptyUI() {
    // 简化判断逻辑，直接检查firstChild是否存在
    while (titleDisplays.firstChild) {
        titleDisplays.removeChild(titleDisplays.firstChild);
    }
}

方案二：延迟DOM查询时机

如果坚持要通过DOM查询获取元素，需要确保查询操作在元素挂载到页面之后执行：

修改list.js，将titleDisplays改为函数式查询，同时增加空值判断避免报错：

export let lists = []
export let listItems = []

// 封装成函数，在需要时才执行DOM查询
export function getTitleDisplays() {
    return document.querySelector('div.sidebar div');
}

export function newList(list) {
    localStorage.setItem(list, [])
    localStorage.setItem(Math.round((localStorage.length + 1) / 2), list);
}

export function emptyUI() {
    const titleDisplays = getTitleDisplays();
    if (!titleDisplays) return; // 元素不存在时直接返回，避免报错
    while (titleDisplays.firstChild) {
        titleDisplays.removeChild(titleDisplays.firstChild);
    }
}

额外注意 #

确保layout.js中创建的div2确实添加了sidebar类，否则即使元素挂载到DOM，document.querySelector('div.sidebar div')也无法找到目标元素。

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