`<Trans>` typing does not support interpolation deeper than first-level children

[foucdeg]

🐛 Bug Report

The following code raises a Typescript error:

<Trans>
  <p>Ticket type “{{ticketType}}” not supported</p>
</Trans>

The error is:

Object literal may only specify known properties, and 'ticketType' does not exist in type 'ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'.

The following code does not raise the error:

<Trans>
  Ticket type “{{ticketType}}” not supported
</Trans>

To Reproduce

<Trans>
  <p>Ticket type “{{ticketType}}” not supported</p>
</Trans>

with react-i18next = 15.5.2, i18next = 24.2.3, typescript = 5.8.3, @types/react = 18.2.48

Expected behavior

No error should be raised.

Your Environment

• runtime version: node v20.18
• i18next version: 24.2.3
• react-i18next version: 15.5.2
• typescript version: 5.8.3
• @types/react version: 18.2.48
• os: Mac

[adrai]

That's a TypeScript limitation...

Try one of the alternatives:

      <p>
        <Trans>
          Ticket type “{{ticketType}}” not supported
        </Trans>
      </p>

      <Trans
        defaults="<0>Ticket type “{{ticketType}}” not supported</0>"
        values={{ ticketType }}
        components={[<p></p>]}
      />