Blazor WASM中点击按钮显示/隐藏Google Maps Div元素时出现渲染错误的求助

我明白你遇到的这个问题——这是Blazor渲染生命周期和JavaScript交互时非常常见的一个坑！当你在OpenMap方法里设置displayMap = true后，Blazor并不会立刻把<div id="map">渲染到DOM中，而是会把这个状态变更加入渲染队列，等当前方法执行完毕后才会更新DOM。这时候你马上调用initialize函数，自然找不到对应的DOM元素，就会抛出Map: Expected mapDiv of type Element but was passed null的错误。

下面给你两种可行的解决方案，你可以根据自己的需求选择：

方法一：利用AfterRenderAsync生命周期方法 #

这个方法借助Blazor的渲染生命周期钩子，确保在DOM更新完成后再初始化地图：

后端C#代码修改 #

[Inject]
public IJSRuntime JSRuntime { get; set; }
protected bool displayMap = false;
private bool _shouldInitializeMap = false; // 标记是否需要初始化地图

protected async Task OpenMap()
{
    displayMap = !displayMap;
    if (displayMap)
    {
        // 只标记需要初始化，等待DOM渲染完成后执行
        _shouldInitializeMap = true;
    }
}

protected override async Task AfterRenderAsync(bool firstRender)
{
    // 检查是否需要初始化地图
    if (_shouldInitializeMap)
    {
        await JSRuntime.InvokeVoidAsync("initialize", null);
        _shouldInitializeMap = false; // 重置标记，避免重复初始化
    }
    await base.AfterRenderAsync(firstRender);
}

Razor页面代码保持不变 #

@if (displayMap)
{
    <MudCard>
        <MudCardContent>
            <div id="map" style="height:500px;width:100%;">
            </div>
        </MudCardContent>
    </MudCard>
}

原理：AfterRenderAsync会在组件完成渲染（DOM已更新）后被调用，这时候<div id="map">已经存在于DOM中，调用initialize函数就能正常找到元素了。

方法二：使用ElementReference直接引用DOM元素（推荐） #

这种方式更符合Blazor的最佳实践，还能避免多个组件使用同一个id导致的冲突问题：

后端C#代码修改 #

[Inject]
public IJSRuntime JSRuntime { get; set; }
protected bool displayMap = false;
private ElementReference _mapDiv; // 直接引用地图DOM元素

protected async Task OpenMap()
{
    displayMap = !displayMap;
    if (displayMap)
    {
        // 强制Blazor立刻完成DOM渲染，确保_mapDiv指向实际元素
        await InvokeAsync(StateHasChanged);
        // 将DOM元素直接传给JS函数
        await JSRuntime.InvokeVoidAsync("initialize", _mapDiv);
    }
}

Razor页面代码修改 #

@if (displayMap)
{
    <MudCard>
        <MudCardContent>
            <!-- 使用@ref绑定ElementReference -->
            <div @ref="_mapDiv" style="height:500px;width:100%;">
            </div>
        </MudCardContent>
    </MudCard>
}

JavaScript代码修改 #

需要调整initialize函数，接收传入的DOM元素而不是通过id查找：

function initialize(mapDiv) {
    // 直接使用传入的DOM元素初始化地图
    const map = new google.maps.Map(mapDiv, {
        center: { lat: -34.397, lng: 150.644 }, // 示例坐标
        zoom: 8,
    });
}

原理：InvokeAsync(StateHasChanged)会强制Blazor立即执行一次渲染，更新DOM后_mapDiv就会指向实际的<div>元素，再把它传给JS函数，就能确保初始化时mapDiv不为null。

这两种方法都能解决你的问题，个人更推荐第二种，因为它更直观，也避免了id冲突的潜在风险。

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