Magento 2技术问询：如何在全站获取customerData并解决迷你购物车及结账页面的获取异常问题

我来帮你一步步拆解这个问题的原因和解决方案：

一、为什么全站直接调用customer().firstName返回undefined？ #

核心原因是customerData是异步加载的：Magento_Customer/js/customer-data返回的是Observable对象，在页面初始化时可能还没完成从服务器或localStorage的数据读取，此时直接调用customer()拿到的是空对象，自然访问firstName会返回undefined。

正确的全站获取方式：订阅数据变化 #

你需要通过订阅Observable的变化来确保数据加载完成后再访问，代码示例如下：

define([
    'Magento_Customer/js/customer-data',
    'uiComponent'
], function(customerData, Component) {
    'use strict';

    return Component.extend({
        initialize: function() {
            this._super();
            const customer = customerData.get('customer');
            
            // 订阅customer数据的更新，确保拿到有效数据
            customer.subscribe(function(customerData) {
                // 注意：Magento中客户名字段是小写的`firstname`，不是`firstName`
                if (customerData.firstname) {
                    console.log('客户名：', customerData.firstname);
                    // 在这里处理你的迷你购物车自定义展示逻辑
                }
            });

            // 同时检查当前已加载的数据（如果页面初始化时数据已就绪）
            const currentCustomer = customer();
            if (currentCustomer.firstname) {
                console.log('当前客户名：', currentCustomer.firstname);
            }
        }
    });
});

二、结账页customerData.get('customer')返回空值，但window.customerData能拿到数据的原因及解决 #

原因分析 #

Magento的结账页属于敏感页面，默认不使用localStorage存储customerData，而是通过页面渲染时直接注入全局的window.customerData变量。但Magento_Customer/js/customer-data服务在结账页初始化时，不会自动读取这个全局变量，导致调用get('customer')返回空对象。

结账页的解决方案 #

你可以手动将全局的window.customerData同步到customerData服务中，代码示例：

define([
    'Magento_Customer/js/customer-data',
    'uiComponent'
], function(customerData, Component) {
    'use strict';

    return Component.extend({
        initialize: function() {
            this._super();
            let customer = customerData.get('customer');

            // 处理结账页的特殊情况
            if (window.customerData && window.customerData.customer) {
                // 将全局的customer数据同步到customerData服务
                customerData.set('customer', window.customerData.customer);
                // 同步后再获取数据
                customer = customerData.get('customer');
            }

            // 后续订阅或访问数据的逻辑和全站一致
            customer.subscribe(function(customerData) {
                if (customerData.firstname) {
                    console.log('结账页客户名：', customerData.firstname);
                }
            });
        }
    });
});

额外注意点 #

• 字段名大小写：Magento的客户实体中，名字段是firstname和lastname（全小写），不是驼峰式的firstName，这可能也是你之前拿到undefined的原因之一。
• 缓存问题：确保你的子主题minicard.js文件没有被浏览器缓存，开发时可以开启Magento的开发者模式禁用缓存。

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