WordPress主题出现Uncaught TypeError报错，致结账功能故障求修复

问题概述 #

使用WordPress主题时结账功能完全失效，浏览器控制台抛出以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'left')
    at X (main.min.js?ver=6.3.2:1:50679)
    at main.min.js?ver=6.3.2:1:58007
    at dispatch (jquery.min.js?ver=3.7.0:2:39997)
    at v.handle (jquery.min.js?ver=3.7.0:2:37968)

已尝试更新主题、禁用所有插件，问题仍未解决。

关联代码片段 #

报错对应的函数代码如下：

function X() {
    var t = e("#content").outerWidth()
      , a = (e("#content").offset().left,
    t / 2 - e("#content .page-container").width() / 2)
      , i = function(e, t, i, s) {
        var o = e.find("> .wpb_column > .vc_column-inner");
        t && (o = e.find("> .split-box-container")),
        i && (o = e.find("> .parallax-content")),
        o = s ? o.last() : o.eq(0),
        Clb.isMobile || o.css("padding-" + (s ? "right" : "left"), a + "px")
    }
      , s = function(e, a, i) {
        var s = e.find(a ? "> .split-box-container" : "> .wpb_column > .vc_column-inner > .wpb_wrapper");
        (s = i ? s.last() : s.eq(0)).css({
            position: "",
            left: "",
            width: ""
        }),
        s.length && (i ? s.css("width", t - s.offset().left + "px") : s.css({
            position: "relative",
            left: -s.offset().left + "px",
            width: s.offset().left + s.outerWidth() + "px"
        }),
        Clb.isMobile && s.css({
            width: "",
            left: ""
        }))
    };
    e(".clb-column-padding-left").each(function() {
        i(e(this), e(this).hasClass("split-box"), e(this).hasClass("parallax"), !1)
    }),
    e(".clb-column-padding-right").each(function() {
        i(e(this), e(this).hasClass("split-box"), e(this).hasClass("parallax"), !0)
    }),
    e(".clb-stretch-column-left").each(function() {
        s(e(this), e(this).hasClass("split-box"), !1)
    }),
    e(".clb-stretch-column-right").each(function() {
        s(e(this), e(this).hasClass("split-box"), !0)
    })
}

问题分析 #

报错核心是尝试读取undefined的left属性，结合代码定位到两个触发点：

1. e("#content").offset().left：结账页面通常没有主题自定义的#content容器，空jQuery对象调用.offset()返回undefined，读取left直接报错。
2. s.offset().left：函数s中如果找不到目标元素（如.wpb_wrapper、.split-box-container），空对象调用.offset()同样返回undefined，触发报错。

错误会阻断后续JS执行，直接导致结账功能失效。

修复方案 #

方案1：添加DOM存在性检查（推荐） #

修改函数X，在访问DOM元素的属性和方法前先判断元素是否存在，避免空对象报错：

function X() {
    var $content = e("#content");
    if (!$content.length) return;

    var t = $content.outerWidth()
      , $pageContainer = $content.find(".page-container");
    var a = $pageContainer.length ? (t / 2 - $pageContainer.width() / 2) : 0;
    
    var i = function(e, t, i, s) {
        var o = e.find("> .wpb_column > .vc_column-inner");
        t && (o = e.find("> .split-box-container")),
        i && (o = e.find("> .parallax-content")),
        o = s ? o.last() : o.eq(0);
        
        if (o.length && !Clb.isMobile) {
            o.css("padding-" + (s ? "right" : "left"), a + "px");
        }
    }
      , s = function(e, a, i) {
        var s = e.find(a ? "> .split-box-container" : "> .wpb_column > .vc_column-inner > .wpb_wrapper");
        s = i ? s.last() : s.eq(0);
        
        if (!s.length) return;
        
        s.css({
            position: "",
            left: "",
            width: ""
        });
        
        if (!Clb.isMobile) {
            var offset = s.offset();
            if (!offset) return;
            
            if (i) {
                s.css("width", t - offset.left + "px");
            } else {
                s.css({
                    position: "relative",
                    left: -offset.left + "px",
                    width: offset.left + s.outerWidth() + "px"
                });
            }
        } else {
            s.css({
                width: "",
                left: ""
            });
        }
    };
    
    e(".clb-column-padding-left").each(function() {
        i(e(this), e(this).hasClass("split-box"), e(this).hasClass("parallax"), !1)
    }),
    e(".clb-column-padding-right").each(function() {
        i(e(this), e(this).hasClass("split-box"), e(this).hasClass("parallax"), !0)
    }),
    e(".clb-stretch-column-left").each(function() {
        s(e(this), e(this).hasClass("split-box"), !1)
    }),
    e(".clb-stretch-column-right").each(function() {
        s(e(this), e(this).hasClass("split-box"), !0)
    })
}

方案2：限制函数仅在指定页面执行 #

若不想修改主题JS，可通过WordPress条件判断，仅在需要该函数的页面加载main.min.js，结账页面跳过：

1. 打开主题functions.php，找到注册main.min.js的代码。
2. 修改加载逻辑：

function enqueue_theme_scripts() {
    // 排除结账页面加载主题自定义JS
    if (!is_checkout()) {
        wp_enqueue_script('theme-main', get_template_directory_uri() . '/js/main.min.js', array('jquery'), '6.3.2', true);
    }
    // 单独为结账页面加载必要的基础JS
    if (is_checkout()) {
        // 按需添加结账所需JS
    }
}
add_action('wp_enqueue_scripts', 'enqueue_theme_scripts');

方案3：添加错误捕获 #

在调用函数X的位置包裹try-catch，防止错误阻断后续代码：

try {
    X();
} catch (err) {
    console.warn("主题布局函数执行异常：", err);
}

验证步骤 #

1. 清除WordPress缓存和浏览器缓存。
2. 访问结账页面，检查控制台是否仍有报错。
3. 测试完整结账流程，确认功能恢复正常。

内容的提问来源于stack exchange，提问作者João Paulo Villa Mello