diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 5d46eada56dcbf..d7a1fddbffa2f0 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -63,13 +63,13 @@ function useDemoData(codeVariant, demo, githubLocation, codeStyling) {
   const { canonicalAs } = pathnameToLanguage(router.asPath);
 
   return React.useMemo(() => {
-    let product;
+    let productId;
     let name = 'Material UI';
     if (canonicalAs.startsWith('/joy-ui/')) {
-      product = 'joy-ui';
+      productId = 'joy-ui';
       name = 'Joy UI';
     } else if (canonicalAs.startsWith('/base-ui/')) {
-      product = 'base-ui';
+      productId = 'base-ui';
       name = 'Base UI';
     } else if (canonicalAs.startsWith('/x/')) {
       name = 'MUI X';
@@ -145,7 +145,7 @@ function useDemoData(codeVariant, demo, githubLocation, codeStyling) {
       jsxPreview,
       ...codeOptions,
       title: `${getDemoName(githubLocation)} demo — ${name}`,
-      product,
+      productId,
       language: userLanguage,
       codeStyling,
     };
@@ -478,8 +478,8 @@ export default function Demo(props) {
   const [showAd, setShowAd] = React.useState(false);
   const adVisibility = showAd && !disableAd && !demoOptions.disableAd;
 
-  const DemoRoot = demoData.product === 'joy-ui' ? DemoRootJoy : DemoRootMaterial;
-  const Wrapper = demoData.product === 'joy-ui' ? BrandingProvider : React.Fragment;
+  const DemoRoot = demoData.productId === 'joy-ui' ? DemoRootJoy : DemoRootMaterial;
+  const Wrapper = demoData.productId === 'joy-ui' ? BrandingProvider : React.Fragment;
 
   const isPreview = !codeOpen && showPreview;
 
@@ -532,7 +532,7 @@ export default function Demo(props) {
         onMouseEnter={handleDemoHover}
         onMouseLeave={handleDemoHover}
       >
-        <Wrapper {...(demoData.product === 'joy-ui' && { mode })}>
+        <Wrapper {...(demoData.productId === 'joy-ui' && { mode })}>
           <InitialFocus
             aria-label={t('initialFocusLabel')}
             action={initialFocusRef}
@@ -557,7 +557,7 @@ export default function Demo(props) {
       ))}
       <AnchorLink id={`${demoName}.js`} />
       <AnchorLink id={`${demoName}.tsx`} />
-      <Wrapper {...(demoData.product === 'joy-ui' ? { mode } : {})}>
+      <Wrapper {...(demoData.productId === 'joy-ui' ? { mode } : {})}>
         {demoOptions.hideToolbar ? null : (
           <NoSsr defer fallback={<DemoToolbarFallback />}>
             <React.Suspense fallback={<DemoToolbarFallback />}>
diff --git a/docs/src/modules/sandbox/Dependencies.ts b/docs/src/modules/sandbox/Dependencies.ts
index 8f7181439e6c86..094cb0d41d74fa 100644
--- a/docs/src/modules/sandbox/Dependencies.ts
+++ b/docs/src/modules/sandbox/Dependencies.ts
@@ -10,7 +10,7 @@ type RegExpMatchArrayWithGroups<T> = (RegExpMatchArray & RegExpMatchArrayWithGro
 export default function SandboxDependencies(
   demo: {
     raw: string;
-    product?: 'joy-ui' | 'base-ui';
+    productId?: 'joy-ui' | 'base-ui';
     codeVariant: keyof typeof CODE_VARIANTS;
   },
   options?: { commitRef?: string },
@@ -168,7 +168,7 @@ export default function SandboxDependencies(
     dependencies.typescript = 'latest';
   }
 
-  if (!demo.product && !dependencies['@mui/material']) {
+  if (!demo.productId && !dependencies['@mui/material']) {
     // The `index.js` imports StyledEngineProvider from '@mui/material', so we need to make sure we have it as a dependency
     const name = '@mui/material';
     const versions = {
diff --git a/docs/src/modules/utils/getProductInfoFromUrl.test.js b/docs/src/modules/utils/getProductInfoFromUrl.test.js
index 53d8314ac33a06..8fa583a3e628ea 100644
--- a/docs/src/modules/utils/getProductInfoFromUrl.test.js
+++ b/docs/src/modules/utils/getProductInfoFromUrl.test.js
@@ -55,13 +55,13 @@ describe('getProductInfoFromUrl', () => {
       // Now, it's a none goal to be able to handle this. Either change the URL to be
       // /x/react-data-grid/migration-v5/
       // or add the productId header to the markdown of this page.
-      productId: null,
+      productId: 'null',
     });
   });
 
   it('should handle MUI Toolpad', () => {
     expect(getProductInfoFromUrl('/toolpad/getting-started/first-app/')).to.deep.equal({
-      productCategoryId: null,
+      productCategoryId: 'null',
       productId: 'toolpad',
     });
   });