Shopify Navigation Menu无法设置激活菜单及子页面激活失效求助

此前在子页面设置对应导航菜单激活状态时一切正常，当当前页面与导航目标一致或从该导航跳转时默认行为也没问题。但现在页面作为特定导航的子页面时，对应菜单无法再被设置为激活状态。此前可用的代码突然失效，怀疑是AppBridge组件更新导致。

官方参考代码：

# 此代码来自官方文档
const itemsLink = AppLink.create(app, {
  label: 'Items',
  destination: '/items',
});

const settingsLink = AppLink.create(app, {
  label: 'Settings',
  destination: '/settings',
});

// 创建一个将settings link设为激活状态的NavigationMenu
const navigationMenu = NavigationMenu.create(app, {
  items: [itemsLink, settingsLink],
  active: settingsLink,
});

自身实现代码：

window.navigationMenu = NavigationMenu.create(app, {
  items: navItems // 通过AppLink.create({})创建的菜单项数组
});

// navItem => 要激活的特定菜单项
window.navigationMenu.set({active: navItem});

排查与修复方案 #

• 确认AppBridge版本兼容性
  若升级到AppBridge v3+，NavigationMenu的API有变更：

  • 旧版set({active: item})需改用update方法，或创建时通过selectedItemId指定激活项（需给每个AppLink添加id属性）。示例调整：

    // 创建AppLink时添加id
    const settingsLink = AppLink.create(app, {
      id: 'settings-link',
      label: 'Settings',
      destination: '/settings',
    });
    
    // 创建时指定激活项
    const navigationMenu = NavigationMenu.create(app, {
      items: [itemsLink, settingsLink],
      selectedItemId: 'settings-link',
    });
    
    // 后续更新激活项
    navigationMenu.update({selectedItemId: 'settings-link'});
    

• 验证navItem引用有效性
  确保navItem是当前NavigationMenu实例中包含的AppLink对象，而非重新创建的新实例（AppBridge组件实例靠引用绑定，参数相同的新实例无法被识别）。可以在创建时保存实例映射：

  const navItemMap = {};
  const navItems = [
    AppLink.create(app, {id: 'items', label: 'Items', destination: '/items'}),
    AppLink.create(app, {id: 'settings', label: 'Settings', destination: '/settings'})
  ].map(item => {
    navItemMap[item.id] = item;
    return item;
  });
  // 激活时直接取映射中的实例
  window.navigationMenu.set({active: navItemMap['settings']});
  

• 禁用自动路由匹配
  NavigationMenu默认会根据当前路由自动匹配激活项，子页面路由与导航目标不匹配时会覆盖手动设置。可创建时添加autoselect: false禁用该行为：

  window.navigationMenu = NavigationMenu.create(app, {
    items: navItems,
    autoselect: false
  });
  

• 确保代码执行时机
  把设置激活项的代码放在AppBridge初始化完成的回调中，比如app.subscribe('APP::LOADED', () => { ... })，避免因App实例未就绪导致方法失效。

内容的提问来源于stack exchange，提问作者aldrien.h