diff --git a/.changeset/fix-heading-hook.md b/.changeset/fix-heading-hook.md
new file mode 100644
index 00000000..d67fdfcf
--- /dev/null
+++ b/.changeset/fix-heading-hook.md
@@ -0,0 +1,5 @@
+---
+'@tiny-design/react': patch
+---
+
+Fix conditional hook call in Heading component
diff --git a/packages/react/src/typography/heading.tsx b/packages/react/src/typography/heading.tsx
index 51dc7e1b..532b3401 100644
--- a/packages/react/src/typography/heading.tsx
+++ b/packages/react/src/typography/heading.tsx
@@ -7,14 +7,13 @@ import { HeadingProps } from './types';
 const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
   (props, ref) => {
     const { level = 1, prefixCls: customisedCls, className, children, ...otherProps } = props;
+    const configContext = useContext(ConfigContext);
+    const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);
 
     if (level < 1 || level > 6) {
       console.warn('The heading level parameter is invalid.');
       return null;
     }
-
-    const configContext = useContext(ConfigContext);
-    const prefixCls = getPrefixCls('typography', configContext.prefixCls, customisedCls);
     const cls = classNames(prefixCls, className);
 
     return React.createElement(