Type 'AnyRegularField' is not assignable to type 'LinkField'

Developing with Prismic
,
1

Hello there, i use RadixUI, a react component UI lib. And I want to insert their <NavigationMenu.Link> inside <PrismicNextLink>. I kept have this error when I pass the field:LinkField props :

Type 'AnyRegularField' is not assignable to type 'LinkField'.
Type 'null' is not assignable to type 'LinkField'.ts(2322)
MenuLink.tsx(6, 5): The expected type comes from property 'field' which is declared here on type 'IntrinsicAttributes & Props'

And this is my code :
page.tsx

export default function Homepage(){
  const clientPrimic = createClient();
  const settings = await clientPrimic.getSingle('settings');
  const navigations = settings.data.navigation; // The FieldGroup contains label and link

  return <Navbar navigations={navigations}/>
}

MenuLink.tsx (where i insert the UI lib link into <PrismicNextLink>)

import * as NavigationMenu from '@radix-ui/react-navigation-menu';
import { PrismicNextLink } from '@prismicio/next';
import { KeyTextField, LinkField } from '@prismicio/client';

interface Props {
    field:LinkField;
    children:KeyTextField;
}

export default function MenuLink({field, children}:Props) {
  return (
    <PrismicNextLink field={field} passHref legacyBehavior>
        <NavigationMenu.Link>{children}</NavigationMenu.Link>
    </PrismicNextLink>
  )
}

Navbar.tsx

import * as NavigationMenu from '@radix-ui/react-navigation-menu';
import MenuLink from './components/MenuLink';
import { GroupField } from '@prismicio/client';

interface Props {
    navigations:GroupField;
}

export default function Navbar({navigations}:Props) {
  return (
          <NavigationMenu.Root>
            <NavigationMenu.List>
                {navigations.map((item)=>{
        return (
            <NavigationMenu.Item>
            <MenuLink field={item.link}> // Here comes the error i talked at beginning
                {item.label} /* Here,nearly the same error, but saying "Type 'AnyRegularField' is not assignable to type 'KeyTextField'."*/
            </MenuLink>
          </NavigationMenu.Item>
        )
    })}
      <NavigationMenu.Indicator /> 
    </NavigationMenu.List>

   <NavigationMenu.Viewport /> 
  </NavigationMenu.Root>
  )
}

Thanks for your help !

2

I ve found a solution, from the poste here.
Basing the accepted answer, we have two solutions, I used the second one, that is asserting the type of the field like this :

return (
            <NavigationMenu.Item>
            <MenuLink field={item.link as LinkField}> // Here comes the error i talked at beginning
               {item.label as KeyTextField} /* Here,nearly the same error, but saying "Type 'AnyRegularField' is not assignable to type 'KeyTextField'."*/
            </MenuLink>
          </NavigationMenu.Item>
        )

When I refresh the page, there's a error like this :
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function

This is because the Radix UI component should be put into a client-side component. I added use client at the top of my Navbar.tsx, it works fine.

1 Like