Razor组件生产环境空引用异常及异步初始化渲染同步问题解决

问题根源 #

你的代码存在两个核心问题：

1. 逻辑顺序错误：OnInitializedAsync中先调用_userManager.FindByNameAsync(userName)，但此时userName未赋值（初始为null），之后才设置userName = "abcde"，导致查询无效。
2. 异步渲染不匹配：Blazor组件会在异步初始化完成前先进行首次渲染，此时userName和identity还未被赋值，直接访问会触发空引用异常。

解决步骤 #

1. 正确获取当前登录用户的用户名

不能直接用.Result阻塞调用GetAuthenticationStateAsync，要异步获取认证状态：

var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
userName = authState.User.Identity?.Name;

2. 调整初始化逻辑顺序

先获取用户名，再查询用户信息，确保异步操作完成后再更新组件状态。

3. 渲染时处理空值状态

在HTML部分添加判断，避免直接访问未初始化的对象，同时可以添加加载提示提升用户体验。

修正后的完整代码 #

@page "/admin/userInfo"
@page "/admin"
@inherits OwningComponentBase<UserManager<IdentityUser>>
@inject AuthenticationStateProvider AuthenticationStateProvider

<h4>User Information</h4>

@if (string.IsNullOrEmpty(userName))
{
    <p>Loading user info...</p>
}
else
{
    <h2>User name: @userName</h2>
    @if (identity != null)
    {
        <p>User ID: @identity.Id</p>
    }
}
<h4>h4 tag</h4>

@code {
    public UserManager<IdentityUser> _userManager => Service;
    public string userName;
    public IdentityUser identity;

    protected override async Task OnInitializedAsync()
    {
        // 先获取当前登录用户的用户名
        var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
        userName = authState.User.Identity?.Name;

        if (_userManager != null && !string.IsNullOrEmpty(userName))
        {   
            // 用正确的用户名查询用户信息
            identity = await _userManager.FindByNameAsync(userName);
        }
        Console.WriteLine("OnInitializedAsync completed");
    }
}

关键说明 #

• 异步操作完成后，Blazor会自动触发组件重新渲染，此时userName和identity已有值，能正常显示。
• 添加@if判断可以避免空引用异常，同时给用户加载反馈。
• 避免在Blazor中使用.Result或.Wait()处理异步任务，会导致UI阻塞甚至死锁。

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