Blazor Server应用添加Blazored Toast后出现removeChild空引用错误

问题详情 #

我基于Blazor Server构建应用，集成Blazored Toast后原本运行正常，突然触发以下异常：

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit '_uHkRPxSSxkesQYflYcmwBUPkOEPFVb3cJpYUrXjDgA'.
      System.AggregateException: One or more errors occurred. (TypeError: Cannot read properties of null (reading 'removeChild'))
       ---> System.InvalidOperationException: TypeError: Cannot read properties of null (reading 'removeChild')
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)
         --- End of inner exception stack trace ---

调试过程中观察到以下现象：

• 部分启动场景无报错，但无法切换页面
• 无代码变更的情况下也会突然触发异常
• 仅重启调试器无需修改代码，应用即可恢复正常
• 回滚到之前确认可用的Git版本后，问题依然存在

当前使用的_Layout.cshtml代码：

@using Microsoft.AspNetCore.Components.Web
@namespace VTSSupportApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
    <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
@*     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> *@
    <link href="css/site.css" rel="stylesheet" />
    <link href="VTSSupportApp.styles.css" rel="stylesheet" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <script src="_framework/blazor.server.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!-- Add chart.js reference if Chart components are used in the application. -->

</body>
</html>

浏览器异常截图：

排查与修复步骤 #

1. 移除重复的Blazor核心脚本引用 #

从你的_Layout.cshtml代码中可以看到，<script src="_framework/blazor.server.js"></script>被重复加载了两次。重复加载Blazor核心脚本会导致电路状态混乱，触发DOM操作异常。删除其中一个重复的引用即可。

2. 确认Blazored Toast的初始化流程 #

• 确保已在Program.cs中正确注册服务：

  builder.Services.AddBlazoredToast();
  

• 在App.razor或MainLayout.razor中添加<BlazoredToasts />组件，且确保该组件仅添加一次，放置在不会被频繁卸载的根节点位置。

3. 清理缓存与重置应用状态 #

由于回滚版本后问题依然存在，大概率是缓存或临时状态导致：

• 清除浏览器缓存（快捷键Ctrl+Shift+Delete）
• 停止调试器，执行项目清理操作（右键项目 → 清理），然后重新生成并启动应用

4. 调整Toast调用时机 #

避免在组件同步初始化方法（如OnInitialized）中直接调用Toast，改用异步方式确保在正确的渲染上下文执行：

protected override async Task OnInitializedAsync()
{
    // 等待组件完成初始渲染后调用Toast
    await Task.Delay(100);
    await _toastService.ShowInfoToastAsync("初始化完成");
}

或使用InvokeAsync包裹调用逻辑：

protected override void OnInitialized()
{
    InvokeAsync(async () =>
    {
        await _toastService.ShowInfoToastAsync("初始化完成");
    });
}

5. 更新Blazored Toast版本 #

检查NuGet包管理器中Blazored Toast的版本，更新到最新稳定版，新版本可能已修复类似的DOM操作异常问题。

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