我在迁移到react-leaflet v3.x后遇到了同样的问题
因此，我通过使用react-leafletuseMap钩子做了一个小把戏，并成功地尝试了根据容器（无论它是什么，也无论它是窗口）调整Map的大小。
因此，我的Map Container代码如下所示：

function SetHeightOnChange({ height }) {
    const map = useMap();

    const mapContainer = map.getContainer();
    mapContainer.style.cssText = `height: ${height}px; width: 100%; position: relative;`;

    return null;
  }

  return (
    <MapContainer
      center={center}
      zoom={13}
      style={{
        height: height + "px",
        width: "100%",
      }}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <CircleMarker center={position}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </CircleMarker>
      <SetHeightOnChange height={height} />
    </MapContainer>
  );

**请注意：**对于Mapwidth，您所需要的只是将其设置为100%。

还请注意MapContainer中的子组件，我将其命名为SetHeightOnChange（确保将该子组件放在Marker标记之后）。
现在，无论何时，只要您在任何调整大小更改后触发高度值更新，您的Map大小将相应地更改。

使用Map的“invalidateSize”函数：

const { height } = useSize(container);
useEffect(() => {
  if (map != null) {
    map.invalidateSize();
  }
}, [map, height]);

您可以将其放在map的子项中（如另一个答案中所述），也可以放在父项中（将map作为MapContainer上的ref），两种方式都可以。
MapContainer只需要静态样式：

width: 100%;
height: 100%;

不再有问题（最终）