When passing slice data to a client component in Next.js 14, TypeScript errors occur and RichText loses formatting

Developing with Prismic
,
1

I have a Custom Types in the Static zone, which links to the Content Relationship Slice repeatable zone and I fetched the Slice from the slice index.tsx and passed the data to a client component.

I was able to render the data in the browser, but there are two issues here.

  1. TypeScript still complains about the slice data that gets passed from a prop to a client component.
  2. Unorderlist, span, bold, or any special formats from Richtext didn't render. They are rendered with a p tag.

Thank you in advance!

slice/Tabs/index.tsx

const Tabbers = async ({ slice }: TabsProps): Promise<JSX.Element> => {

  const client = createClient();

  const tabs = await Promise.all(
    slice.items.map((item) => {
      if (isFilled.contentRelationship(item.tab) && item.tab.uid) {
        return client.getByUID("tab", item.tab.uid);
      }
    })
  );

  const tabData = tabs.map((tab) => tab.data);

  return (
    <Bounded
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
      className={`${styles.inner}`}
    >
      <InnerWrapper className={`${styles.innerWrapper}`}>
        {slice.primary.show_intro ? (
          <PrismicRichText
            field={slice.primary.intro}
            components={components}
          />
        ) : null}

        <TabsList tabData={tabData} />

slice/Tabs/TabsList.tsx

"use client";

import { Content } from "@prismicio/client";
import {
  TabsSliceDefaultItem,
  TabsSliceDefaultPrimary,
} from "../../../prismicio-types";
import { Tabs, Tab, Card, CardBody } from "@nextui-org/react";

type TabsListProps = {
  tabs: Array<TabsSliceDefaultItem>;
};

export default function TabsList({ tabData }: TabsListProps) {
  console.log(tabData);
  return (
    <>
      <div className="flex w-full flex-col flex-center justify-center">
        <Tabs
          aria-label="Dynamic tabs"
          items={tabData}
          className="flex flex-row flex-center justify-center"
        >
          {tabData &&
            tabData.map((item, index) => {
              const heading = item.heading;
              const description = item.description;
              const image = item.image;
              return (
                <Tab key={index} title={item.tab_name}>
                  <Card>
                    <CardBody>
                    ...
                    ...
                    ...
2

I have attempted to answer this in the previous thread where this originated.