使用react-google-charts调用TreeMap报not a constructor错误

使用react-google-charts库开发时，控制台抛出未捕获类型错误：
Uncaught TypeError: google.visualization.TreeMap is not a constructor

涉及的核心实现代码如下：

// Instantiate and draw our chart, passing in some options.
const tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data, {
  minColor: '#f00',
  midColor: '#ddd',
  maxColor: '#0d0',
  headerHeight: 15,
  fontColor: 'black',
  showScale: true
});
setChart(tree);
}}, [google, chart]);

return (
  <>
    {!google && <Spinner />}
    <div id="chart_div" className={!google ? 'd-none' : ''} />
  </>
)

TreeMap不属于Google Charts核心包默认加载的图表类型，未显式引入treemap模块、或模块未加载完成就调用构造函数，都会触发该报错。

• 配置图表加载依赖：调用google.charts.load初始化时，必须在packages配置数组中显式添加treemap包，不能仅加载默认的corechart包，参考配置：

google.charts.load('current', {
  packages: ["corechart", "treemap"],
  // 其余配置项按需添加即可
});

• 控制实例化时序：所有TreeMap实例初始化、渲染逻辑，必须在treemap模块加载完成后执行。如果是手动操作实例，将相关逻辑放到google.charts.setOnLoadCallback回调中执行，避免加载未完成就调用构造函数。
• 推荐使用react-google-charts封装的组件写法，无需手动操作DOM实例化，组件会自动处理依赖加载、时序控制，直接指定chartType="TreeMap"即可，参考示例：

import { Chart } from "react-google-charts";

export default function TreemapChart() {
  return (
    <Chart
      chartType="TreeMap"
      width="100%"
      height="500px"
      data={/* 传入符合TreeMap格式要求的数据集 */}
      options={{
        minColor: '#f00',
        midColor: '#ddd',
        maxColor: '#0d0',
        headerHeight: 15,
        fontColor: 'black',
        showScale: true
      }}
    />
  )
}

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