Shopware 6重写sw-category-tree组件访问categoryRepository报错排查

问题场景 #

我在Shopware 6中重写sw-category-tree组件，代码如下：

import template from './sw-category-tree.html.twig';

Shopware.Component.override('sw-category-tree', {
    template,
    methods: {
        async duplicateElement(contextItem) {
            const initContainer = Shopware.Application.getContainer('init');
            const headers = this.$super('computed').categoryRepository().buildHeaders();

原组件中可通过this.categoryRepository访问categoryRepository计算属性，但上述代码触发报错：Uncaught TypeError: Cannot read properties of undefined (reading '#sw-category-tree')。尝试过this.categoryRepository、this.$super.categoryRepository以及this.$super('categoryRepository')，均出现相同错误。

问题原因及解决方式 #

核心原因 #

1. $super调用方式错误：Shopware 6的组件override机制中，$super不能直接通过this.$super('computed')来获取父组件的计算属性集合，这种调用方式不符合框架的API规范，会导致上下文丢失。
2. 代码片段不完整：当前提供的代码缺少方法和组件配置的闭合语法，这会导致组件初始化时上下文异常，进一步触发该错误。

正确处理方式 #

• 直接访问计算属性：在override的methods中，无需通过$super，直接使用this.categoryRepository即可访问原组件的计算属性，前提是组件配置完整。修正后的代码示例：

import template from './sw-category-tree.html.twig';

Shopware.Component.override('sw-category-tree', {
    template,
    methods: {
        async duplicateElement(contextItem) {
            // 直接调用原组件的计算属性
            const categoryRepo = this.categoryRepository;
            const headers = categoryRepo.buildHeaders();
            // 后续业务逻辑...
        }
    }
});

• 重写计算属性的正确姿势：如果需要修改原计算属性的逻辑，应在override配置中单独声明computed字段，通过this.$super('categoryRepository')调用父组件的计算属性实现扩展：

Shopware.Component.override('sw-category-tree', {
    computed: {
        categoryRepository() {
            // 调用父组件的计算属性
            const parentRepository = this.$super('categoryRepository');
            // 自定义扩展逻辑
            return parentRepository;
        }
    }
});

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