Stack Exchange
Type changes between two functions
I am working with the Next.js framework along with TypeScript. I have the following scenario during which a string type is being changed to string[] which subsequently throws a warning in typescript:
import { GetStaticPaths, GetStaticProps } from 'next';

export const getStaticProps: GetStaticProps = async (context) => {
  const { shortId } = context.params;
  const survey = await getSingleSurvey(shortId as string);

  return {
    props: { survey }
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const surveys = await getAllSurveys();

  const paths = surveys.map((survey) => {
    const shortId = shortenId(survey.id);
    const slug = titleToSlug(survey.title);

    return {
      params: {
        shortId,
        slug,
      },
    };
  });

  return {
    fallback: false,
    paths,
  };
};

In getStaticPaths you can see that I shorten the id (because cuid() is really long and I am using the id in my path). When hovering over the constant shortId, I am correctly seeing const shortId: string. Between returning this string from the map function and getStaticProps there seems to be a hiccup. When I hover over const {shortId}... in getStaticProps I am seeing the type const shortId: string | string[]. To resolve this I am casting shortId as a string right below, but if I didn't do so I'd get a warning that Argument of type 'string | string[]' is not assignable to parameter of type 'string'.
For these two questions, picture that I didn't cast shortId as string:

What's causing the discrepancy?
Is there an easier/better solution without type casting?

I'm still new to Typescript, go easy. Cheers
EDIT: getStaticProps' context is provided by the return of getStaticPaths. Hence I expect the values to be the same.
The type definitions are coming from next. Params has a type of params?:  ParsedUrlQuery which then goes on interface ParsedUrlQuery extends NodeJS.Dict<string | string[]> { }.
So I know why it's throwing the error, I just don't understand what is causing the warning when string is an accepted type. Do I always have to cast the type when facing the option string | string[] ?
EDIT2:
export const shortenId = (id: string): string => id.substr(2, 5);


Please show us the type definition of GetStaticProps and GetStaticPaths.

"What's causing the discrepancy?" - I see no indication why the types of the two shortId variables would be the same. One is created using const { shortId } = context.params, the other using const shortId = shortenId(survey.id);.

I'll add the clarification that the context params are provided to getStaticProps by getStaticPaths, so they should be the same.

you didn't show shortenId which is what determines the type of shortId...so, idk

My bad I thought that was all clear. I added the code

"I just don't understand what is causing the warning when string is an accepted type" - string is the only accepted type, but as the type definition says, the value you're passing in could also be an array of strings (in your case, apparently when the url looks like ?shortId=1&shortId=2). So no, you shouldn't do any casting, rather you should add a typecheck.

Where would I add that? When I added it to {shortId} I’ve gotten the warning that string isn’t assignable to string | string[]
