diff --git a/superset-frontend/src/components/ErrorMessage/DatabaseErrorMessage.test.tsx b/superset-frontend/src/components/ErrorMessage/DatabaseErrorMessage.test.tsx
index 78a02a27ee7af..0a1ad27299293 100644
--- a/superset-frontend/src/components/ErrorMessage/DatabaseErrorMessage.test.tsx
+++ b/superset-frontend/src/components/ErrorMessage/DatabaseErrorMessage.test.tsx
@@ -56,7 +56,14 @@ const mockedProps = {
 };
 
 test('should render', () => {
-  const { container } = render(<DatabaseErrorMessage {...mockedProps} />);
+  const nullExtraProps = {
+    ...mockedProps,
+    error: {
+      ...mockedProps.error,
+      extra: null,
+    },
+  };
+  const { container } = render(<DatabaseErrorMessage {...nullExtraProps} />);
   expect(container).toBeInTheDocument();
 });
 
diff --git a/superset-frontend/src/components/ErrorMessage/DatabaseErrorMessage.tsx b/superset-frontend/src/components/ErrorMessage/DatabaseErrorMessage.tsx
index a7a0a4199f5d8..bf2d013fd0477 100644
--- a/superset-frontend/src/components/ErrorMessage/DatabaseErrorMessage.tsx
+++ b/superset-frontend/src/components/ErrorMessage/DatabaseErrorMessage.tsx
@@ -36,7 +36,7 @@ function DatabaseErrorMessage({
   error,
   source = 'dashboard',
   subtitle,
-}: ErrorMessageComponentProps<DatabaseErrorExtra>) {
+}: ErrorMessageComponentProps<DatabaseErrorExtra | null>) {
   const { extra, level, message } = error;
 
   const isVisualization = ['dashboard', 'explore'].includes(source);
@@ -47,7 +47,7 @@ function DatabaseErrorMessage({
         {t('This may be triggered by:')}
         <br />
         {extra.issue_codes
-          .map<React.ReactNode>(issueCode => (
+          ?.map<React.ReactNode>(issueCode => (
             <IssueCode {...issueCode} key={issueCode.code} />
           ))
           .reduce((prev, curr) => [prev, <br />, curr])}