页面加载时出现Cannot set properties of null(innerHTML)错误求助

首次加载页面时#avatar_text元素还未被single-spa布局引擎渲染完成，不管是window.onload还是固定时长的setTimeout都无法保证元素已存在，所以会抛出Cannot set properties of null错误；刷新页面时元素已经在DOM中，因此正常工作。

1. 容错检查 + 可靠的元素监听（MutationObserver） #

替换原有的getAvatarText函数和window.onload逻辑，用MutationObserver等待目标元素出现后再设置内容，同时优化localStorage读取逻辑，避免重复解析和空值报错：

// 封装获取用户姓名首字母的工具函数
function getUserAvatarText() {
  try {
    const userStr = localStorage.getItem("user");
    if (!userStr) return '';
    
    const user = JSON.parse(userStr);
    if (!user?.result) return '';
    
    const userInfo = JSON.parse(user.result);
    const firstName = userInfo.given_name?.[0] || '';
    const lastName = userInfo.family_name?.[0] || '';
    return (firstName + lastName).toUpperCase();
  } catch (err) {
    console.error('获取用户头像文本失败:', err);
    return '';
  }
}

// 封装等待元素出现的函数
function waitForElement(selector) {
  return new Promise(resolve => {
    // 先检查元素是否已存在
    const element = document.getElementById(selector);
    if (element) {
      resolve(element);
      return;
    }

    // 用MutationObserver监听DOM变化
    const observer = new MutationObserver((mutations) => {
      const element = document.getElementById(selector);
      if (element) {
        observer.disconnect();
        resolve(element);
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
}

// 修改自定义事件监听
window.addEventListener('sharedAvatarText', async () => {
  const avatarText = await waitForElement('avatar_text');
  const text = getUserAvatarText();
  if (text) {
    avatarText.innerHTML = text;
  }
});

// 修改页面加载时的逻辑
window.onload = async () => {
  const text = getUserAvatarText();
  if (!text) return;
  
  const avatarText = await waitForElement('avatar_text');
  avatarText.innerHTML = text;
};

2. 对齐single-spa布局生命周期 #

利用single-spa提供的layout-ready事件，确保在布局引擎完成渲染后再操作DOM：

// 可替换或结合上面的window.onload逻辑
singleSpa.addGlobalEventListener('layout-ready', async () => {
  const text = getUserAvatarText();
  if (!text) return;
  
  const avatarText = await waitForElement('avatar_text');
  avatarText.innerHTML = text;
});

3. 调整登录跳转与事件触发顺序 #

在LoginMfe中，确保页面跳转完成后再触发自定义事件，避免事件触发时目标页面还未加载：

// LoginMfe.js 修改为
navigate("/home", {
  onComplete: () => {
    const customEvent = new CustomEvent('sharedAvatarText');
    window.dispatchEvent(customEvent);
  }
});

• 不要依赖固定时长的setTimeout等待DOM元素，MutationObserver是更可靠的方案
• 对localStorage的读取必须加try-catch和空值判断，避免解析失败导致代码崩溃
• 利用single-spa的生命周期事件对齐DOM操作时机，适配微前端的异步加载特性

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