fix tocitem serialization error (#56348)

src/frame/middleware/context/generic-toc.ts

@@ -122,7 +122,7 @@ async function getTocItems(node: Tree, context: Context, opts: Options): Promise
     node.childPages.filter(filterHidden).map(async (child) => {
       const { page } = child
       const title = await page.renderProp('rawTitle', context, { textOnly: true })
-      const octicon = page.octicon ? page.octicon : null
+      const octicon = page.octicon ?? null
       const category = page.category ? page.category : null
       const complexity = page.complexity ? page.complexity : null
       const industry = page.industry ? page.industry : null

src/landings/components/CategoryLanding.tsx

@@ -141,7 +141,7 @@ export const CategoryLanding = () => {
                 <CookBookArticleCard
                   title={item.title}
                   description={item.intro!}
-                  icon={item.octicon}
+                  icon={item.octicon ?? undefined}
                   tags={[
                     ...(item.industry || []),
                     ...(item.category || []),

src/landings/types.ts

@@ -2,7 +2,7 @@
 export type BaseTocItem = {
   fullPath: string
   title: string
-  intro?: string
+  intro?: string | null
 }
 
 // Valid octicon types that match the CookBookArticleCard component
@@ -23,19 +23,19 @@ export type ValidOcticon =
 
 // Extended type for child TOC items with additional metadata
 export type ChildTocItem = BaseTocItem & {
-  octicon?: ValidOcticon
-  category?: string[]
-  complexity?: string[]
-  industry?: string[]
+  octicon?: ValidOcticon | null
+  category?: string[] | null
+  complexity?: string[] | null
+  industry?: string[] | null
 }
 
 // Main TOC item type that can contain children
 export type TocItem = BaseTocItem & {
   childTocItems?: ChildTocItem[]
-  octicon?: ValidOcticon
-  category?: string[]
-  complexity?: string[]
-  industry?: string[]
+  octicon?: ValidOcticon | null
+  category?: string[] | null
+  complexity?: string[] | null
+  industry?: string[] | null
 }
 
 // Type alias for article card components
@@ -90,11 +90,11 @@ export function mapRawTocItemToTocItem(raw: RawTocItem): TocItem {
   return {
     fullPath: raw.fullPath,
     title: raw.title,
-    intro: raw.intro || undefined,
-    octicon: isValidOcticon(raw.octicon) ? raw.octicon : undefined,
-    category: raw.category || undefined,
-    complexity: raw.complexity || undefined,
-    industry: raw.industry || undefined,
+    intro: raw.intro || null,
+    octicon: isValidOcticon(raw.octicon) ? raw.octicon : null,
+    category: raw.category || null,
+    complexity: raw.complexity || null,
+    industry: raw.industry || null,
     childTocItems: raw.childTocItems?.map(mapRawTocItemToTocItem),
   }
 }
@@ -104,7 +104,7 @@ export function mapRawTocItemToSimpleTocItem(raw: RawTocItem): SimpleTocItem {
   return {
     fullPath: raw.fullPath,
     title: raw.title,
-    intro: raw.intro || undefined,
+    ...(raw.intro && { intro: raw.intro }),
     childTocItems: raw.childTocItems?.map((child) => ({
       fullPath: child.fullPath,
       title: child.title,