Blazor子组件收到无效EventId参数时的优雅处理方案咨询

给你几个实用的处理思路，都是Blazor项目里常用的实践：

1. 通过回调参数让父组件处理错误 #

子组件只负责检测记录是否存在，把错误处理逻辑交回给原本就有相关逻辑的父组件，符合职责分离原则。

子组件修改代码： #

/// <summary>
/// The Event.Id of the event we're displaying.
/// </summary>
[Parameter]
[SupplyParameterFromQuery(Name = "id")]
public string? EventId { get; set; }

// 定义回调参数，通知父组件记录不存在
[Parameter]
public EventCallback OnEventNotFound { get; set; }

[Inject]
private IEventService _eventService { get; set; } = null!;

protected override async Task OnInitializedAsync()
{
    await base.OnInitializedAsync();
    
    if (!string.IsNullOrEmpty(EventId))
    {
        var eventItem = await _eventService.GetEventByIdAsync(EventId);
        if (eventItem == null)
        {
            // 触发回调，让父组件执行跳转和提示逻辑
            await OnEventNotFound.InvokeAsync();
            return;
        }
        // 正常加载活动数据的逻辑
    }
}

父组件使用子组件时绑定回调： #

<EventDetailComponent 
    EventId="@currentEventId"
    OnEventNotFound="@HandleEventNotFound" />

@code {
    [Inject]
    private INotificationService _notificationService { get; set; } = null!;
    [Inject]
    private NavigationManager NavigationManager { get; set; } = null!;

    private async Task HandleEventNotFound()
    {
        // 你原本的处理逻辑：弹出提示 + 跳转来源页
        await _notificationService.ShowError("该活动不存在或已被删除");
        NavigationManager.NavigateBack();
    }
}

2. 子组件内部展示友好错误UI #

如果不想依赖父组件，子组件可以自己处理错误状态，直接在页面上展示友好提示，同时提供返回入口，让用户自主操作。

@if (_eventItem == null && !string.IsNullOrEmpty(EventId))
{
    <div class="alert alert-danger p-4">
        <h5>抱歉</h5>
        <p>该活动不存在或已被其他用户删除</p>
        <button class="btn btn-primary mt-2" @onclick="() => NavigationManager.NavigateBack()">返回上一页</button>
    </div>
}
else
{
    <!-- 这里放正常展示活动内容的UI -->
    <h3>@_eventItem?.Title</h3>
    <!-- 其他活动详情内容 -->
}

@code {
    [Parameter]
    [SupplyParameterFromQuery(Name = "id")]
    public string? EventId { get; set; }

    [Inject]
    private IEventService _eventService { get; set; } = null!;
    [Inject]
    private NavigationManager NavigationManager { get; set; } = null!;

    private EventDto? _eventItem;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        
        if (!string.IsNullOrEmpty(EventId))
        {
            _eventItem = await _eventService.GetEventByIdAsync(EventId);
        }
    }
}

3. 使用共享状态服务传递错误状态 #

如果是复杂场景（比如多个组件需要感知这个错误状态），可以注入一个全局状态服务，子组件更新状态，父组件监听状态变化来处理。

状态服务示例： #

public class AppStateService
{
    // 定义错误事件
    public event Action? OnEventNotFound;

    // 触发错误通知
    public void TriggerEventNotFound()
    {
        OnEventNotFound?.Invoke();
    }
}

子组件中调用状态服务： #

[Inject]
private AppStateService _appStateService { get; set; } = null!;

protected override async Task OnInitializedAsync()
{
    await base.OnInitializedAsync();
    
    if (!string.IsNullOrEmpty(EventId))
    {
        var eventItem = await _eventService.GetEventByIdAsync(EventId);
        if (eventItem == null)
        {
            _appStateService.TriggerEventNotFound();
            return;
        }
        // 正常加载数据逻辑
    }
}

父组件中监听状态： #

[Inject]
private AppStateService _appStateService { get; set; } = null!;

protected override void OnInitialized()
{
    base.OnInitialized();
    // 订阅错误事件
    _appStateService.OnEventNotFound += HandleEventNotFound;
}

private async void HandleEventNotFound()
{
    await _notificationService.ShowError("该活动不存在或已被删除");
    NavigationManager.NavigateBack();
}

// 组件销毁时取消订阅，避免内存泄漏
public void Dispose()
{
    _appStateService.OnEventNotFound -= HandleEventNotFound;
}

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