Blazor将NavItem列表作为参数传入NavMenu时如何避免BL0005警告

BL0005警告的触发原因是组件对外暴露的参数为可写的集合类型，不符合Blazor的组件参数规范：Blazor要求组件参数状态仅由父组件传入控制，禁止外部或组件内部随意修改参数的值，避免出现状态不一致导致的渲染异常。

步骤1：修改NavMenu组件的参数定义 #

将集合参数的公共setter替换为初始化器，同时使用只读集合接口约束，避免外部修改集合内容：

[Parameter]
public IReadOnlyList<NavItem> NavItems { get; init; } = [];

注：公共属性统一使用帕斯卡命名（首字母大写）符合C#编码规范，空列表默认值可避免空引用异常，低版本C#可将[]替换为new List<NavItem>()

步骤2：优化NavItem类定义 #

将NavItem的属性设置为仅初始化可写，避免后续随意修改属性值导致的状态问题：

public class NavItem
{
    public string DisplayName { get; init; } = string.Empty;
    public string Href { get; init; } = string.Empty;
}

步骤3：在MainLayout中传入参数 #

两种常用传参方式均不会触发警告：

• 直接在组件标签内初始化列表

<NavMenu 
    NavItems="@(new List<NavItem>
    {
        new NavItem { DisplayName = "首页", Href = "/" },
        new NavItem { DisplayName = "数据列表", Href = "/list" },
        new NavItem { DisplayName = "关于我们", Href = "/about" }
    })"
/>

• 先在MainLayout的代码块中定义只读列表变量，再传入组件

// MainLayout.razor的@code块
private readonly IReadOnlyList<NavItem> _menuItems = new List<NavItem>
{
    new NavItem { DisplayName = "首页", Href = "/" },
    new NavItem { DisplayName = "数据列表", Href = "/list" },
    new NavItem { DisplayName = "关于我们", Href = "/about" }
};

<!-- 组件调用 -->
<NavMenu NavItems="@_menuItems" />

额外注意 #

如果需要动态更新菜单列表，不要直接修改现有NavItems集合的元素或内容，应该更新整个列表的引用，触发组件的参数更新渲染。

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