diff --git a/components/md-renderer/mdx-components/heading.tsx b/components/md-renderer/mdx-components/heading.tsx
index 53e25bfcc..1bda10f03 100644
--- a/components/md-renderer/mdx-components/heading.tsx
+++ b/components/md-renderer/mdx-components/heading.tsx
@@ -5,7 +5,7 @@ import LinkIcon from 'components/icons/link.svg';
 const linkify = (Component: React.FunctionComponent<any>) => {
   return function EnrichedHeading(props: { children: string }): React.ReactNode {
     const text = props.children;
-    const id = text.toLowerCase && text
+    const id = text?.toLowerCase && text
       .toLowerCase()
       .replace(/[^\x00-\x7F]/g, '')
       .replace(/\s+/g, '-')