React/TypeScript 中模板文字表达式的无效类型“string | undefined”

Question

I'm testing whether a POST method is being called upon submission:

process.env.NEXT_PUBLIC_API_URL = 'http://localhost:3000/';


it('should make a POST request when called', async () => {
    await contactProxy(defaultRequest, response);

    expect(global.fetch).toHaveBeenCalledWith(
        //underlined with a warning
        `${process.env.NEXT_PUBLIC_API_URL}tenants/v1/${locale}/inquiries`,
        {
            method: 'POST',
            headers: getDefaultHeaders(),
            body: JSON.stringify(defaultRequest.body)
        }
    );
});

but process.env.NEXT_PUBLIC_API_URL is underlined with Invalid type "string | undefined" of template literal expression in React/TypeScript

Casting

process.env.NEXT_PUBLIC_API_URL = 'http://localhost:3000/' as string;

doesn't solve it

Answer 1

The environments from process.env are all defined as string | undefined string | undefined .

In order to fix this, you have to extract the environment in a variable and type check on it

process.env.NEXT_PUBLIC_API_URL = 'http://localhost:3000/';


it('should make a POST request when called', async () => {
    await contactProxy(defaultRequest, response);

    const NEXT_PUBLIC_API_URL = process.env.NEXT_PUBLIC_API_URL;

    if(NEXT_PUBLIC_API_URL) {
      expect(global.fetch).toHaveBeenCalledWith(
        `${NEXT_PUBLIC_API_URL}tenants/v1/${locale}/inquiries`,
        {
            method: 'POST',
            headers: getDefaultHeaders(),
            body: JSON.stringify(defaultRequest.body)
        }
      );
    }
});

Answer 2

Try adding not null assertion to env variable, like so:

${process.env.NEXT_PUBLIC_API_URL!}tenants/v1/${locale}/inquiries

Answer 3

This happens because environment variables are string|undefined. This means that you have to make sure that it's string before you pass it further with something like:

const NEXT_PUBLIC_API_URL = process.env.NEXT_PUBLIC_API_URL;
if(NEXT_PUBLIC_API_URL === undefined){
...
}

I will shamelessly plug an alternative, which would be using a package I have made for getting environment variables easier:https://www.npmjs.com/package/get-env-variable?activeTab=readme

It either grabs the env variable, subsidies it if desired, or throws an error if neither default value, nor env variable was found.