pdfStreamRenderPage = (num) => { // A string of pdf 64-bit streams with zoom in/out rotation
      if (self.pageRendering) {
        self.pageNumPending = num;
      } else {

        const container = document.getElementById('thisCanvas1').getElementsByTagName('canvas');
        // This traversal operation will result in an error
        for (let i = 1; i <= container.length; i++) {
          self.pageRendering = true;
          self.pdfDoc.getPage(i).then((page) => {
            const viewport = page.getViewport(self.scale, self.rotate);
            container[i - 1].height = viewport.height;
            container[i - 1].width = viewport.width;
            const ctx = container[i - 1].getContext('2d');
            const renderContext = {
              canvasContext: ctx,
              viewport
            };
            const renderTask = page.render(renderContext);
            // You can wait here for rendering to finish before manipulating the next canvas
            renderTask.promise.then(() => {
              self.pageRendering = false;
              if (self.pageNumPending !== null) {
                renderPage(self.pageNumPending);
                self.pageNumPending = null;
              }
            });
          });
        }
      }
    };

Optimize this traversal operation logic to wait for the previous renderTask.promise.then() canvas rendering to finish before executing the next canvas rendering operation.
Modified code:

const pdfStreamRenderPage = (num) => {
      // A string of pdf 64-bit streams with zoom in/out rotation
      if (self.pageRendering) {
        self.pageNumPending = num;
      } else {
        const canvasElementMap = document.getElementById('thisCanvas1').getElementsByTagName('canvas');
        const canvasElement = canvasElementMap[0]
        const pageNum = 1
        scalePdfCanvas(canvasElement, pageNum, canvasElementMap)
      }
    };
 
     /**
     * Scaling the contents of each pdf page
     * @param canvasElement current page canvas
     * @param num current page number
     * @param canvasElementMap the set of all rendering pdf's canvas
     */
    const scalePdfCanvas = (
      canvasElement: HTMLCanvasElement, 
      num: number, 
      canvasElementMap: HTMLCollectionOf<HTMLCanvasElement>
      ) => {
        self.pageRendering = true;
        self.pdfDoc.getPage(num).then((page) => {
        const viewport = page.getViewport(self.scale, self.rotate);
        canvasElement.height = viewport.height;
        canvasElement.width = viewport.width;
        const ctx = canvasElement.getContext('2d');

        // Render PDF page into canvas context
        const renderContext = {
          canvasContext: ctx,
          viewport,
        };

        const renderTask = page.render(renderContext);
        // Wait for rendering to finish
        renderTask.promise.then(() => {
          self.pageRendering = false;
          num++;
          if (num <= canvasElementMap.length) {
            // scale next canvas
            scalePdfCanvas(canvasElementMap[num-1], num, canvasElementMap)
          }
          if (self.pageNumPending !== null) {
            // New page rendering is pending
            pdfStreamRenderPage(self.pageNumPending);
            self.pageNumPending = null;
          }
        });
      });
    }