NavMenu无法加载后端数据，浏览器报未处理异常、控制台提示无关联组件元素

• Blazor 异步生命周期执行逻辑：OnInitializedAsync 触发接口请求后，组件会先执行一次渲染，此时接口请求尚未返回，titleList 还处于未赋值状态（默认值为 null 或空集合）
• 模板代码没有做兼容判断，直接调用 titleList.Single(x => x.name == "test2").value：如果 titleList 为 null 会触发空引用异常，如果为空集合 Single() 方法会触发「序列不包含匹配元素」异常，未捕获的渲染异常导致组件和DOM关联失败，就会出现控制台的 No element is currently associated with component 8 报错。

方案1：添加加载状态判断（推荐） #

首先给 titleList 初始化默认空集合，避免空引用：

// NavMenu 后台代码添加初始化逻辑
private List<NavMenuStringModel> titleList = new List<NavMenuStringModel>();

修改模板代码，数据未匹配到之前显示占位内容：

<h2>test</h2>
@if (titleList.Any(x => x.name == "test2"))
{
    <h2>@titleList.Single(x => x.name == "test2").value</h2>
}
else
{
    <h2>加载中</h2>
}

方案2：简化兼容写法 #

用空条件运算符一行处理兼容，无需额外判断分支：

<h2>test</h2>
<h2>@(titleList?.FirstOrDefault(x => x.name == "test2")?.value ?? "加载中")</h2>

方案3：全局加载判断 #

如果导航菜单依赖所有接口返回数据才能渲染，可以直接包裹整个渲染区域：

@if (titleList == null || !titleList.Any())
{
    <div>导航菜单加载中...</div>
}
else
{
    <h2>test</h2>
    <h2>@titleList.Single(x => x.name == "test2").value</h2>
}

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