diff --git a/public/app/plugins/panel/heatmap/migrations.test.ts b/public/app/plugins/panel/heatmap/migrations.test.ts
index 5d919a9187b..e1a18fdea63 100644
--- a/public/app/plugins/panel/heatmap/migrations.test.ts
+++ b/public/app/plugins/panel/heatmap/migrations.test.ts
@@ -1,6 +1,6 @@
 import { PanelModel, FieldConfigSource } from '@grafana/data';
 
-import { heatmapChangedHandler } from './migrations';
+import { heatmapChangedHandler, heatmapMigrationHandler } from './migrations';
 
 describe('Heatmap Migrations', () => {
   let prevFieldConfig: FieldConfigSource;
@@ -91,6 +91,63 @@ describe('Heatmap Migrations', () => {
     `);
   });
 
+  it('Null Options', () => {
+    const panel = {} as PanelModel;
+    panel.options = null;
+    panel.options = heatmapMigrationHandler(panel);
+    expect(panel).toMatchInlineSnapshot(`
+      {
+        "fieldConfig": {
+          "defaults": {},
+          "overrides": [],
+        },
+        "options": {
+          "calculate": true,
+          "calculation": {},
+          "cellGap": 2,
+          "cellRadius": undefined,
+          "cellValues": {
+            "decimals": undefined,
+          },
+          "color": {
+            "exponent": 0.5,
+            "fill": undefined,
+            "max": undefined,
+            "min": undefined,
+            "mode": "scheme",
+            "reverse": false,
+            "scale": "exponential",
+            "scheme": "Oranges",
+            "steps": 128,
+          },
+          "exemplars": {
+            "color": "rgba(255,0,255,0.7)",
+          },
+          "legend": {
+            "show": false,
+          },
+          "rowsFrame": {
+            "layout": "auto",
+          },
+          "showValue": "never",
+          "tooltip": {
+            "show": false,
+            "yHistogram": false,
+          },
+          "yAxis": {
+            "axisPlacement": "left",
+            "axisWidth": undefined,
+            "decimals": undefined,
+            "max": undefined,
+            "min": undefined,
+            "reverse": false,
+            "unit": undefined,
+          },
+        },
+      }
+    `);
+  });
+
   it('Cell padding defaults', () => {
     // zero becomes 1
     expect(
diff --git a/public/app/plugins/panel/heatmap/migrations.ts b/public/app/plugins/panel/heatmap/migrations.ts
index 4771f7850fa..5445ab13745 100644
--- a/public/app/plugins/panel/heatmap/migrations.ts
+++ b/public/app/plugins/panel/heatmap/migrations.ts
@@ -14,7 +14,7 @@ import { Options, defaultOptions, HeatmapColorMode } from './types';
 /** Called when the version number changes */
 export const heatmapMigrationHandler = (panel: PanelModel): Partial<Options> => {
   // Migrating from angular
-  if (Object.keys(panel.options).length === 0) {
+  if (Object.keys(panel.options ?? {}).length === 0) {
     return heatmapChangedHandler(panel, 'heatmap', { angular: panel }, panel.fieldConfig);
   }
   return panel.options;